Adding event listener to multiple elements using for loop and passing different parameters

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?

Giulio Bambini · Accepted Answer · 2018-12-14 05:39:17Z

3

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>

answered Dec 14, 2018 at 5:39

Giulio Bambini

4,7554 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

George Ristic Over a year ago

Thank you. This way seems to be much cleaner compared to wrapping or bind.

Giulio Bambini Over a year ago

@GeorgeRistic, yes you right. bind and (function(){})() are the old ways of doing the solution as let is new feature.....

Praveen Gupta · Accepted Answer · 2018-12-14 05:34:08Z

1

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);
}

answered Dec 14, 2018 at 5:34

Praveen Gupta

2461 silver badge5 bronze badges

Comments

ic3b3rg · Accepted Answer · 2018-12-14 05:38:09Z

1

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>

answered Dec 14, 2018 at 5:38

ic3b3rg

15k4 gold badges33 silver badges55 bronze badges

Comments

Chun Lin · Accepted Answer · 2018-12-14 05:39:19Z

1

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'));
    });
}

answered Dec 14, 2018 at 5:39

Chun Lin

54414 silver badges36 bronze badges

Comments

Devesh · Accepted Answer · 2018-12-14 05:55:47Z

1

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.

answered Dec 14, 2018 at 5:55

Devesh

17011 bronze badges

Collectives™ on Stack Overflow

Adding event listener to multiple elements using for loop and passing different parameters

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related