Passing parameter onclick, in a loop

Question

Im creating input elements in a loop. On click, these buttons are supposed to call a certain function with a certain Parameter, based on the Initial creation of the button element. What in fact does happen is that all Buttons always call the function with Parameter from the LAST button.

for (var i = 0; i < planets.length; i++){
  var id = planets[i].id;

  var input = document.createElement("input");
  input.type = "button";
  input.className = "worldButton";
  input.value = "Choose this world";
  Input.onclick = function(){
     game.pickWorld(planets, id);
  }
}

Each button always seems to pass on the id of planets[planets.length] instead of planets[i]. console.log(id) is correct. It doesnt matter if use onclick, addEventListener or jquery.click.

The whole planets Array however is passed on successfully.

How can i get the Input to correctly pass on the id of that particular Iteration ?

Community · Accepted Answer · 2020-06-20 09:12:55Z

18

You need to use an IIFE and create a new closure like

for (var i = 0; i < planets.length; i++){
  var id = planets[i].id;

  var input = document.createElement("input");
  input.type = "button";
  input.className = "worldButton";
  input.value = "Choose this world";
  
  input.onclick = (function(id, planets){
     return function(){
         game.pickWorld(planets, id);
     }
  })(id,planets);
}

What was happening is the variables planets and id were visible to the callback function and at execution time, were using the last iterated value.

However, with a closure, you effectively created a 'private' variable seen and preserved by each callback function.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 27, 2015 at 8:13

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

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

Comments

Alex Char · Accepted Answer · 2015-05-27 08:14:16Z

5

You need to pass the id and planets variables in the function like:

for (var i = 0; i < planets.length; i++){
  var id = planets[i].id;

  var input = document.createElement("input");
  input.type = "button";
  input.className = "worldButton";
  input.value = "Choose this world";
  Input.onclick = (function(pl, id){
     game.pickWorld(pl, id);
  })(planets, id);
}

You can read more about IIFE in this article.

answered May 27, 2015 at 8:14

Alex Char

33.2k9 gold badges51 silver badges71 bronze badges

Collectives™ on Stack Overflow

Passing parameter onclick, in a loop

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related