How to insert items into an array and display them inside a div in JavaScript

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?

kukkuz · Accepted Answer · 2017-08-10 16:20:55Z

4

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>

edited Aug 10, 2017 at 16:20

answered Aug 10, 2017 at 15:39

kukkuz

42.5k6 gold badges65 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

billyhalim25 Over a year ago

Thanks for your answers. May I ask why my for loop above isn't executed?

billyhalim25 Over a year ago

How about if I want to use array instead of appending items to a div?

kukkuz Over a year ago

well, you can add to a list and append in the btn.onclick and keep the data in the array if that is intended...

kukkuz Over a year ago

the for loop you have written in the question is outside the click listener and you should use +=

billyhalim25 Over a year ago

I want the list of items displayed from array for future use (local storage).

user2399035 · Accepted Answer · 2017-08-10 15:39:30Z

1

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

answered Aug 10, 2017 at 15:39

user2399035

4 Comments

billyhalim25 Over a year ago

Thanks for your answers.

billyhalim25 Over a year ago

Your code doesn't create a list of items. It only displays the lat item (index) from the for loop.

user2399035 Over a year ago

@billyhalim25 my code was just to demonstrate that to trigger the execution of the for loop it has to be included in the function that is called on click. OP is asking about why it isn't executed. I agree with your feedback about what the code does :)

billyhalim25 Over a year ago

Okay. I'm sorry for that.

PeterMader · Accepted Answer · 2017-08-10 15:41:04Z

1

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>

answered Aug 10, 2017 at 15:41

PeterMader

7,3352 gold badges24 silver badges32 bronze badges

Comments

kyun · Accepted Answer · 2017-08-10 15:41:40Z

1

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>

answered Aug 10, 2017 at 15:41

kyun

10.4k9 gold badges36 silver badges79 bronze badges

2 Comments

billyhalim25 Over a year ago

Thanks for your answers.

billyhalim25 Over a year ago

But I want an answer using array instead of appending.

Collectives™ on Stack Overflow

How to insert items into an array and display them inside a div in JavaScript

4 Answers 4

5 Comments

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related