title: How to change the function called by a dynamically created button?
body: <p>I was making a little game in JavaScript when I ran into a problem. In this game I create a hundred buttons using a for() loop. Eventually I want every button to call a function called 'click' and send it an int so it knows what button is pressed. So for instance when button four is pressed click(4) is called. First I tried this:</p>
  
  <pre><code>object.onclick = "click(4)";
  </code></pre>
  
  <p>That obviously didn't work so i searched the interwebs and fount an answer to this question on your site.</p>
  
  <pre><code>object.onclick = function() {click("4");}
  </code></pre>
  
  <p>I tried that (with and without the ';' at the end) but it doesn't seem work. </p>
  
  <p>A more complete overview of the dummy code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     document.getElementById('myContainer').innerHTML += '&lt;input id="tmp" type="button" value="button"&gt;';
     documengetElementById('tmp').onclick = function() {tmpFunc("bla");}
  
  function tmpFunc(vari){
     alert(vari);
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>The element myContainer is 100% empty!</strong></p>
  
  <p>Remember, this is just dummy code to try it out. I could do this waaaaay easier but I tried to simplify it first so you don't have to look at my messy code. </p>
  
  <p><strong>So what is the best way to call a function from a button you have created in a for loop?</strong> If you know a way to do it totally different from the one I use just post it, I don't care how it gets solved! Although I'd also like somebody to explain why this isn't working.</p>
  
  <p>Hope I didn't ask a question already answered, as far as I know I'm using the solution given for this problem in another post.</p>
  
  <p><strong>------------UPDATE-------------</strong></p>
  
  <p>Changed it a bit after getting an answer from somebody. This is the current code, select() isn't executed when a button is pressed. Here's the complete JavaScript code so you can copy-paste it if you want to play around with it.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  function addButtons(){
  
      var disabled = false;
  
      for(var i = 1; i &lt;= 100; i++){
  
          currentButton = '&lt;input id="tmp" type="button" onclick="select(\''+i+'\')"&gt;'
          document.getElementById('myContainer').innerHTML += currentButton;
          document.getElementById('tmp').id = 'btn'+i;
          gb(i).disabled = disabled;
          gb(i).style.width = "60px";
          gb(i).style.height = "60px";
          gb(i).style.fontSize = "25pt";
  
          function alerts(nr){
              alert("test");
          }
  
          if(i%10 == 0){
              document.getElementById('myContainer').innerHTML = document.getElementById('myContainer').innerHTML + '&lt;br /&gt;';
          }else{
              if(disabled){
                  disabled = false;
              }else{
                  disabled = true;
              }
          }
  
          if(i == 60){
              gb(i).value = 'O';
              gb(i).style.color = "blue";
          }
  
          if(((i-1)%10 == 0) &amp;&amp; !(gb(i).disabled)){
              gb(i).value = 'X';
              gb(i).style.color = "red";
          }
      }
  }
  
  function select(nr){
      alert("Bla!"+nr);
      gb(nr).style.height = "100px";
  }
  
  function gb(ButtonNrVanHetButton){
      return document.getElementById('btn'+ButtonNrVanHetButton);
  }
  
  addButtons();
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Most parts aren't very interesting for solving the problem (style etc) It's supposed to look like a checkerboard.</p>
  
  <p><strong>------------UPDATE-------------</strong></p>
  
  <p><strong>Solved!</strong> Don't use functions the javascript library already uses for other stuff like: 'select()'. Thx to everybody who tried to help!</p>