So, I am trying to print out an array that gets user input text added to it, but what I want to print out is an ordered list of the array. As you can see, (if you run my code) the list item just keeps getting the user input added to it, and no new list items are added with people's names. Please help! Here is the 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>
This question is related to
javascript
dom
The above answer was helpful for me, but it might be useful (or best practice) to add the name on submit, as I wound up doing. Hopefully this will be helpful to someone. CodePen Sample
<form id="formAddName">
<fieldset>
<legend>Add Name </legend>
<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName" />
<button>Add</button>
</fieldset>
</form>
<ol id="demo"></ol>
<script>
var list = document.getElementById('demo');
var entry = document.getElementById('formAddName');
entry.onsubmit = function(evt) {
evt.preventDefault();
var firstName = document.getElementById('firstName').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(firstName));
list.appendChild(entry);
}
</script>
I was recently presented with this same challenge and stumbled on this thread but found a simpler solution using append...
var firstname = $('#firstname').val();
$('ol').append( '<li>' + firstname + '</li>' );
Store the firstname value and then use append to add that value as an li to the ol. I hope this helps :)
Try something like this:
var node=document.createElement("LI");
var textnode=document.createTextNode(firstname);
node.appendChild(textnode);
document.getElementById("demo").appendChild(node);
Source: Stackoverflow.com