Print All For Loop Array Values to Inner HTML

Question

I would like to print some array values to the screen inside a container div. The loop below is only printing the final array value "dog" to the screen.

I can't seem to work out the problem here?

JS

var arr = ["mouse", "cat", "dog"];
var holder = document.getElementById("holder");

for ( var i=0; i < arr.length; i+=1 ) {

holder.innerHTML = "<p>" + arr[i] + "</p><br/>" ;

}

HTML

<div id="holder"></div>

Append to innerHTML (+= not =) at the moment your overwriting it. — Alex K.
– Alex K., Commented Jan 18, 2018 at 16:46

BuzzRage · Accepted Answer · 2018-01-18 16:47:56Z

4

Try with += in holder.innerHTML = "<p>" + arr[i] + "</p><br/>" ;, otherwise it will overwrite the line for each iteration.

var arr = ["mouse","cat","dog"];
var holder = document.getElementById("holder");
for(var i=0; i < arr.length; i++)
  holder.innerHTML += "<p>"+arr[i]+"</p><br>";

<div id="holder"></div>

answered Jan 18, 2018 at 16:47

BuzzRage

1841 silver badge12 bronze badges

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

Collectives™ on Stack Overflow

Print All For Loop Array Values to Inner HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related