title: onclick event not firing javascript
body: <p>EDIT #2:</p>
  
  <p>Made a JS Fiddle... <a href="http://jsfiddle.net/N2p6G/" rel="nofollow">http://jsfiddle.net/N2p6G/</a> (I hardcoded some stuff that I'm certain works correctly, but the problem is still there)</p>
  
  <p>Original:</p>
  
  <p>So, I have written tens of thousands of lines of javascript, and used code that look like this a hundreds of times and I don't understand what's going on.</p>
  
  <pre><code>blacklistitembutton.onclick = function() {
    console.log("clicked.");
  }
  </code></pre>
  
  <p>The above code does not seem to be working... and I can't figure out why</p>
  
  <p>In fact, I use the same method earlier in the same file... and it works fine!</p>
  
  <pre><code>settings.onclick = function() {
    settings_popup.toggle();
  }
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>Might it have something to do with the fact that it's being executed in a for loop?
  Here is the code...</p>
  
  <pre><code>var blacklistButton = document.createElement('input');
  blacklistButton.type = 'button';
  blacklistButton.value = "Add Current Site to Blacklist";
  blacklistButton.onclick = function() {
    console.log('blacklistButton clicked');
  }
  
  for (var i=0;i&lt;blacklist.length;i++) {
    var blacklistitembutton = document.createElement('div');
    blacklistitembutton.type = 'button';
    blacklistitembutton.blacklistValue = blacklist[i];
    blacklistitembutton.value = "X";
    blacklistitembutton.onclick = function() {
      console.log("clicked.");
    }
  }
  </code></pre>
  
  <p>Then both blacklistButton and all of the blacklistitembuttons are put into the document through element.appendChild (and they all show up successfully!)</p>
  
  <p>The blacklistButton onclick fires just fine, and the blacklistitembutton onclick does not.</p>