使用for循环并传递不同的参数将事件侦听器添加到多个元素

Question

<div id="mydiv0"></div>
<div id="mydiv1"></div>
<div id="mydiv2"></div>


var myArray = [
  document.getElementById("mydiv0"),
  document.getElementById("mydiv1"),
  document.getElementById("mydiv2")
];

function myFunction(x){
  alert("my number is " + x);
}

for(var i = 0; i < myArray.length; i++){
  myArray[i].addEventListener("click", function(){myFunction(i);});
}

I want to attach event listener to each element in myArray. When clicked, an alert message should be displayed showing numbers 0,1 and 2 for mydiv0, mydiv1 and mydiv2 respectively. I tried using for loop as seen in the example above, but no matter which div I click on, I get "my number is 3" message. Is there a way to pass the different values of variable i as a parameter of myFunction?

Answer 1

You can simply declare the variable in the loop with let instead of var that creates a block scope local variable.

 var myArray = [ document.getElementById("mydiv0"), document.getElementById("mydiv1"), document.getElementById("mydiv2") ]; function myFunction(x){ alert("my number is " + x); } for(let i = 0; i < myArray.length; i++){ myArray[i].addEventListener("click", function(){myFunction(i);}); } 

 <div id="mydiv0">Div 0</div> <div id="mydiv1">Div 1</div> <div id="mydiv2">Div 2</div> 

Answer 2

You have to create a isolated scope for click callback.

for(var i = 0; i < myArray.length; i++){
  (function(i){
    myArray[i].addEventListener("click", function(){myFunction(i);});
  })(i);
}

Answer 3

Use bind :

 var myArray = [ document.getElementById("mydiv0"), document.getElementById("mydiv1"), document.getElementById("mydiv2") ]; function myFunction(x){ alert("my number is " + x); } for(var i = 0; i < myArray.length; i++){ myArray[i].addEventListener("click", myFunction.bind(null, i)); } 

 div { height: 20px; width: 200px; border: 1px solid black; } 

 <div id="mydiv0"></div> <div id="mydiv1"></div> <div id="mydiv2"></div> 

Answer 4

Alternatively, you can use data attribute as follows.

<div id="mydiv0" data-value="1"></div>
<div id="mydiv1" data-value="2"></div>
<div id="mydiv2" data-value="3"></div>

for(var i = 0; i < myArray.length; i++){
    myArray[i].addEventListener("click",  function() {
        myFunction(this.getAttribute('data-value'));
    });
}

Answer 5

Just use 'let' instead of 'var' as below :

for(let i = 0; i < myArray.length; i++){
    myArray[i].addEventListener("click", function(){myFunction(i);});
}

'let' allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the 'var' keyword, which defines a variable globally, or locally to an entire function regardless of block scope.