title: Event listeners overwriting one another?
body: <pre><code>function newMenu(items,results){
      document.getElementById("menu").innerHTML = "";
      for (var i = 0; i &lt; items.length; i++) {
          document.getElementById("menu").innerHTML += "&lt;li&gt;" + items[i] + "&lt;/li&gt;";
          document.getElementById("menu").childNodes[i].addEventListener("click",function(){document.write("foo")});
  
      };
  }
  </code></pre>
  
  <p>I am trying to use this code to generate a list and then give each of the list items a different function to be activated when they are clicked (right now I've just made them all write "foo" to test that the event listeners work). However, when I run this function, it will write all of the list content correctly (they're passed as an array into 'items').</p>
  
  <p>My problem arises with the event listeners. Only the last list item's event listener works. That is to say, only when I click on the last li in the list does it execute document.write("foo"). I've tried changing the size of the items array and every time it's the last list item, regardless of length. Why might this be? Are the event listeners overwriting one another?</p>