javascript change html in event listener -
i'm starting experiment building chrome extensions (first exposure html , javascript well) , got stuck on basic task. have popup.html file, user sees. i'd have placeholder text displayed user. popup have button when user clicks on button placeholder text replaced else.
here tested:
popup.html:
<!doctype html> <html> <head> <title>test extension</title> <script src="popup.js"></script> </head> <body> <form id="testform"> <input id="testbutton" type="submit" value="testbutton" /> </form> <h3 id="textheader">this change.</h3> </body> </html> popup.js:
function changetext() { document.getelementbyid('textheader').innerhtml = 'changed!'; } document.addeventlistener('domcontentloaded', function () { document.getelementbyid('testform').addeventlistener('submit', changetext); }); when debug script, see initial addeventlistener phone call calls changetext , causes text in popup alter 'changed!'. however, see sec phone call of addeventlistener, reverts original popup.html form. net effect 'changed!' appears brief instant.
is there way create changes html file in event listener permanent intended behavior? realize need gain understanding of dom model , how javascript can interact in browser. i'm looking book or other resource consult (the mozilla developer network site looked authoritative source, seemed kind of sparse), in meantime hoping gain @ to the lowest degree additional understanding working through simple example. thanks!
edit:
thank prompt responses! disabling form submissions makes sense. i'm adding edit question post because original task trying accomplish did in fact need create utilize of form.
what i'm trying take in input user through form, query external site (ex: wikipedia) phrase user typed in, , display in popup content that's taken query.
here skeleton outline of attempted:
popup.html:
<!doctype html> <html> <head> <title>test extension</title> <script src="popup.js"></script> </head> <body> <form id="wikipediaform"> <input type="text" id="userquery" size="50"/> <input id="submitquery" type="submit" value="ask wikipedia" /> </form> <h3 id="wikipediaresponse">placeholder</h3> </body> </html> popup.js:
function changetext() { var req = new xmlhttprequest(); askurl = 'http://en.wikipedia.org/wiki' + encodeuricomponent(document.getelementbyid('userquery').value); req.open("get", askurl, false); req.onload = function (e) { if (req.readystate === 4) { if (req.status === 200) { document.getelementbyid('wikipediaresponse').innerhtml = req.responsetext; // i'm dumping } } else { console.error(req.statustext); } } }; req.send(null); } document.addeventlistener('domcontentloaded', function () { document.getelementbyid('wikipediaform').addeventlistener('submit', changetext); }); this 1 time again faces same issue saw previous illustration response flashes instant before reverting placeholder text. however, can't follow before answers because need form submitted. usual way of changing content in event listener form?
on note, i'm using synchronous xmlhttprequest call, know isn't recommend. when used asynchronous phone call didn't seem go through , couldn't figure out how prepare that, that's problem i'm working on.
use:
function changetext() { document.getelementbyid('textheader').innerhtml = 'changed!'; //returning false prevent form submission completes homecoming false; } but if form never going send info anywhere, don't need form @ (unless you're going utilize reset button fields). can add together type="button" element.
<body> <input id="testbutton" type="button" value="testbutton" /> <h3 id="textheader">this change.</h3> </body> javascript html eventlistener
No comments:
Post a Comment