title: retrieving array value on mouseover with javascript
body: <p>I'm trying to figure out a way to retrieve and display the value of a div tag that is created  with a 2D array using JavaScript. I figured either onclick or onmouseover would work but neither would in this approach. I would like to avoid creating 49 functions that does the same thing (just displaying the 'cell' the mouse is over).</p>
  
  <pre><code>&lt;style type="text/css"&gt;
    .float {float: left;}
    .clear {clear:both;}
    div {border: thin solid blue; padding: 2px;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="grid"&gt;&lt;/div&gt;
      &lt;div id="bucket" class="float"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript"&gt;
  var axisY = 7;
  var axisZ = 7;
  
  for (var i = 0; i &lt; axisY; i++) {
    for (var j = 0; j &lt; axisZ; j++) {
      document.getElementById('grid').innerHTML += "&lt;div onmouseout='displayNone()' onmouseover='displayMe(cellId)' id='area" + i + j + "' class='float'&gt;" + i + ":" + j + "&lt;/div&gt;";
    }
    document.getElementById('grid').innerHTML += "&lt;br class='clear' /&gt;";
  }
  
  function displayMe(cellId) {
    // ???
  }
  
  function displayNone() {
    document.getElementById('bucket').innerHTML = "";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks!</p>