title: Passing parameter onclick, in a loop
body: <p>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.</p>
  
  <pre><code>for (var i = 0; i &lt; 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);
    }
  }
  </code></pre>
  
  <p>Each button always seems to pass on the id of planets[planets.length] instead of <code>planets[i]</code>.
  <code>console.log(id)</code> is correct.
  It doesnt matter if use <code>onclick</code>, <code>addEventListener</code> or <code>jquery.click</code>.</p>
  
  <p>The whole planets Array however is passed on successfully.</p>
  
  <p>How can i get the Input to correctly pass on the id of that particular Iteration ?</p>