如何在JavaScript中将项目插入数组并在div中显示它们

Question

I have a problem with array in Javascript. I have a button that pushes an item to an array. After I click the button, the for loop which is intended to display a list of items in a div isn't executed.

Below is the code:

HTML:

<input type="text" id="tb">
<button id="btn">Submit</button>
<div id="list"></div>

Javascript:

var list = [];

btn.onclick = function(){
    list.push(document.getElementById("tb").value);
}

for (var i in list){
    document.getElementById("list").innerHTML = "<p>"+list[i]+"</p>"
}

Are there any solutions for this such that after I click the button, the div updates the list of items, much like a to-do list?

Answer 1

You can just append the html to the list when clicking the button - see demo below:

 btn.onclick = function() { document.getElementById("list").innerHTML += "<p>" + document.getElementById("tb").value + "</p>" } 

 <input type="text" id="tb"> <button id="btn">Submit</button> <div id="list"></div> 

If you want to use the array as a data store as you say in the comments to this answer, you may do something like given in the snippet below:

 var list = []; btn.onclick = function() { // add to the list list.push(document.getElementById("tb").value); // TODO: save to local storage if needed // reset the list document.getElementById("list").innerHTML = ''; // display the list for (var i in list) { document.getElementById("list").innerHTML += "<p>" + list[i] + "</p>"; } } 

 <input type="text" id="tb"> <button id="btn">Submit</button> <div id="list"></div> 

Answer 2

i'd do:

var list = [];

btn.onclick = function(){
    list.push(document.getElementById("tb").value);
    for (var i in list){
        document.getElementById("list").innerHTML = "<p>"+list[i]+"</p>"
    }
}

As you can see the for loop must be triggered in its execution so i moved it inside the function

Answer 3

Just append a new <p> element to the list instead of using innerHTML . Also, you should bind event listeners using addEventListener :

 var list = document.getElementById('list'); var input = document.getElementById('tb'); document.getElementById('btn').addEventListener('click', function () { var p = document.createElement('p'); p.textContent = input.value; list.appendChild(p); }); 

 <input type="text" id="tb"> <button id="btn">Submit</button> <div id="list"></div> 

Answer 4

 var list = []; var btn = document.getElementById("btn"); btn.onclick = function(){ var tb = document.getElementById("tb").value; //list.push(tb); document.getElementById("list").innerHTML += "<p>"+tb+"</p>" } 

 <input type="text" id="tb"> <button id="btn">Submit</button> <div id="list"></div>