I have N buttons on the page, and I need to find which button is clicked. So far I have this code, which will show the number of buttons, instead of button order:
var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
nodes[i].addEventListener('click', function() {
console.log('You clicked element #' + );
});
}
You need to create a closure or use bind, since the value of i will have already reached the final value before you actually click and before the click handler looks up the value of i:
var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
nodes[i].addEventListener('click', function(i) {
console.log('You clicked element #' + i);
}.bind(null, i));
}
bind will create a copy of the function that has the current value of i bound to it, so it does no harm if i changes by the next iteration.
I don't now if I understand your question, but is this resolve your question?
var nodes = document.getElementsByTagName('button');
for (var i = 0, size = nodes.length; i < size; i++) {
nodes[i].addEventListener('click', function(i) {
console.log('You clicked element index' + i);
}.bind(null, i));
}
jsbin: https://jsbin.com/podicumeha/1/edit?html,console,output
var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
nodes[i].addEventListener('click', function(index) {
console.log('You clicked element index' + index);
}.bind(this, i));
}
