Creating global variable within eventListener whitin the same "for"

Question

var buttons = document.querySelectorAll('button');
    var span = document.querySelectorAll('.counter');

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function (event) {
        span[i].innerText = parseInt(span[i].innerText) +1;
    });
}

the inner span doesnt "see" the same [i] i use for buttons. the console returns "not defined" any suggestions on how to fix that problem?

score 0 · Answer 1 · answered Oct 26 '16 at 12:39

This is because your event handler (click on your button), will run later, and that time, i is something else. You should use a closure to keep it internal:

var buttons = document.querySelectorAll('button'); 
var span = document.querySelectorAll('.counter');

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', (function (i) {
        return function (event) {
          span[i].innerText = parseInt(span[i].innerText || 0) + 1;
        };
    }(i)));
}

<button>A</button>
<span class="counter"></span>

<button>B</button>
<span class="counter"></span>

<button>C</button>
<span class="counter"></span>

Creating global variable within eventListener whitin the same "for"

1 Answers1