Why does innerHTML only give me the last value of the for loop?

Question

I am an absolute javascript layman.

I made a simple for loop and wanted to output the value of i in a div.

Unfortunately, only the last value is displayed.

But why does console.log (i) show me every value of i in the console?

for (i = 0; i < 10; i++) {
  let myBlock = document.getElementById('myblock');
  console.log(i)
  myBlock.innerHTML = i;
}

<div id="myblock"/>

The browser does not update the view on every update, generally. — Pointy, Dec 18 '20 at 16:17
`console.log(i)` doesn't overwrite the previous logs but `myBlock.innerHTML = i;` overwrites the previous innerHTML. — takendarkk, Dec 18 '20 at 16:19
You aren't appending the value to the element and overwriting it each time — phuzi, Dec 18 '20 at 16:19
How I can realize that? So that I get every value in the div? — PlatoRG, Dec 18 '20 at 16:20
Use something like `+=` to append text instead of just `=` which resets the text. — takendarkk, Dec 18 '20 at 16:21

score 2 · Answer 1 · answered Dec 18 '20 at 16:20

"Unfortunately, only the last value is displayed."

Because each iteration you are setting the innerHTML to i so at the last iteration it will be i and so the last value is 10.

"But why does console.log (i) show me every value of i in the console?"

You have 10 iterations meaning it will run 10 times because of the for loop.

So it will console.log(); 10 times.

1 Answers1