Using var in JavaScript with a for loop issue?

Question

I know I can use the let keyword here to get the desired outcome, but I would like to know why clicking on the div items alerts #5 for each div.

var div;
var box = document.getElementById('box');
for (var i = 0; i < 5; i++) {
  div = document.createElement('div');
  div.onClick = function() {
    alert('this is box # ' + i);
  }
  box.appendChild(div);
}

<div id="box"></div>

Take a look at this answer: https://stackoverflow.com/a/29558498/9513184 — Unmitigated, Sep 16 '21 at 21:52
Because by the time you click on the div, the loop has completed and i has a value of 5. — Liftoff, Sep 16 '21 at 21:52
Because you are creating click function with referenced i not current value of i. Then whatever you click, reference same i which is 4. — huseyin tugrul buyukisik, Sep 16 '21 at 21:54

score 0 · Answer 1 · answered Sep 16 '21 at 22:05

When you assign the anonymous function to the click, it does not run its body. Its body of codes runs only when it is clicked so the first time i variable is used in the function it has already the value of 4. You need to evaluate current value of i while it is in the loop and place it in the function generated, by a function generating function. Otherwise it will take a reference to i and use its latest value always.

Using var in JavaScript with a for loop issue?

1 Answers1