Adding event listeners within a forLoop vs closures

Question

<button id="btn-0">Button 1!</button>
<button id="btn-1">Button 2!</button>
<button id="btn-2">Button 3!</button>



var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
for (var btnNum = 0; btnNum < prizes.length; btnNum++) {
  document.getElementById('btn-' + btnNum).onclick = function() {
    alert(prizes[btnNum]);
  }
}

The reason why this doesn't work is because when a function accesses a variable outside its scope, it accesses that variable, not a frozen copy, so when a user clicks a button, they will always get undefined since the for loop has already incremented btnNum to 3. prizes[3] is undefined.

My question is, does the same hold true for the document.getElementById('btn-' + btnNum)? Is the for loop attaching 3 event handlers to btn3? Or is it still attaching a click handler to each button, even though they will all alert undefined.

I'm asking a different question, not just trying to get the code to work.

Answer 1

My question is, does the same hold true for the document.getElementById('btn-' + btnNum)?

Yes. btnNum refers to the same variable every time (though it's directly in scope, not the closure parent scope).

Is the for loop attaching 3 event handlers to btn3?

No. document.getElementById(…) and btn are evaulated during the loop, so at that time the current value of btn really is the expected one - the last assignment was the increment, which changes the value between those evaluations of the loop body.

Or is it still attaching a click handler to each button, even though they will all alert undefined.

Yes. The alerting of undefined happens because btn is then (through the click) evaluated at a time where it carries the value 3.

Answer 2

In this case, Reference to btnNum is already executes and that is why you will get 'Fresh Laundry!' in all the clicks. The reason document.getElementById('btn-' + btnNum) is working the way you expect is event is binded at the very time loop is executing but callabck function will be executed later when user clicks..

var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
for (var btnNum = 0; btnNum < prizes.length; btnNum++) {
  document.getElementById('btn-' + btnNum).onclick = (function(btnNum) {
    return function() {
      alert(prizes[btnNum]);
    }
  })(btnNum)
}

<button id="btn-0">Button 1!</button>
<button id="btn-1">Button 2!</button>
<button id="btn-2">Button 3!</button>

Answer 3

Here you go. below are my answers for your queries.

Does the same hold true for the document.getElementById('btn-' + btnNum).

No.

Is the for loop attaching 3 event handlers to btn3?

During iteration, btnNum is accessible, so its add 3 event listener all 3 buttons.

Or is it still attaching a click handler to each button, even though they will all alert undefined.

Yes its attached 3 events to 3 buttons. It will alert undefined because prizes variable is not exist and its globally available in window.prizes

var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
for (var btnNum = 0; btnNum < prizes.length; btnNum++) {
  document.getElementById('btn-' + btnNum).onclick = function() {
    alert(this.innerHTML);
    var no = this.getAttribute('id').split('-')[1];
    console.log(no);
    alert(window.prizes[no])
  }
}

<button id="btn-0">Button 1!</button>
<button id="btn-1">Button 2!</button>
<button id="btn-2">Button 3!</button>