dom - Add a list item through javascript -
so, trying print out array gets user input text added it, want print out ordered list of array. can see, (if run code) list item keeps getting user input added it, , no new list items added people's names. please help! here code below:
<!doctype html> <html> <head> first name: <input type="text" id="firstname"><br> <script type="text/javascript"> var x= []; function changetext2(){ var firstname = document.getelementbyid('firstname').value; document.getelementbyid('boldstuff2').innerhtml = firstname; x.push(firstname); document.getelementbyid('demo').innerhtml = x; } </script> <p>your first name is: <b id='boldstuff2'></b> </p> <p> other people's names: </p> <ol> <li id = "demo"> </li> </ol> <input type='button' onclick='changetext2()' value='submit'/> </head> <body> </body> </html>
if want create li element each input/name, have create it, document.createelement [mdn].
give list id:
<ol id="demo"></ol> and reference it:
var list = document.getelementbyid('demo'); in event handler, create new list element input value content , append list node.appendchild [mdn]:
var firstname = document.getelementbyid('firstname').value; var entry = document.createelement('li'); entry.appendchild(document.createtextnode(firstname)); list.appendchild(entry); 
Comments
Post a Comment