javascript - 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 ?

Answer 1

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.