title: Using same onmouseover function for multiple objects
body: <p>I'm creating a building game in JavaScript and PHP that involves a grid. Each square in the grid is a div, with an own onmouseover and onmousedown function:</p>
  
  <pre><code>for(x=0; x &lt; width; x++)
  {
      for(y=0; y &lt; height; y++)
      {
          var div = document.createElement("div");
          //...
          div.onmouseclick = function() {blockClick(x, y)}
          div.onmouseover = function() {blockMouseover(x, y)}
          game.appendChild(div);
      }
  }
  </code></pre>
  
  <p>But, all of the squares seem to have the x and y of the last square that was added. I can sort of see why this is happening - it is making a pointer to x and y instead of cloning the variables - but how could I fix it? I even tried</p>
  
  <pre><code>for(x=0; x &lt; width; x++)
  {
      for(y=0; y &lt; height; y++)
      {
          var div = document.createElement("div");
          var myX = x;
          var myY = y;
          div.onmouseclick = function() {blockClick(myX, myY)}
          div.onmouseover = function() {blockMouseover(myX, myY)}
          game.appendChild(div);
      }
  }
  </code></pre>
  
  <p>with the same result.</p>
  
  <p>I was using <code>div.setAttribute("onmouseover", ...)</code> which worked in Firefox, but not IE.
  Thanks!</p>