title: javascript addEventListener is not working
body: <p>I'm writing a simple chrome extension that lists all the open tabs, I have this code on it</p>
  
  <pre><code>function changeTab(tabID){
    chrome.tabs.update(tabID,{active:false})
  }
  
  chrome.windows.getCurrent({populate: true},function (window){
    list = document.getElementById('open-tabs');
    for (var i = 0; i &lt; window.tabs.length; i++)
    {
      var li = document.createElement('li');
      var element = document.createElement('a');
      element.setAttribute('href','#');
      element.innerHTML = window.tabs[i].title;
      element.addEventListener("click",function(){
        changeTab(window.tabs[i].id);
      },false);
      li.appendChild(element);
      list.appendChild(li);
    }
  });
  </code></pre>
  
  <p>It lists the open tabs, but doesn't seem to add the onClick event, when I checked the chrome console I get this</p>
  
  <p><img src="https://i.stack.imgur.com/coTAL.png" alt="chrome console"></p>
  
  <p>Why is not adding the event correctly?</p>
  
  <p>--edit--
  Adding the html if it helps</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Count Me&lt;/title&gt;
      &lt;link rel="stylesheet" href="popup.css" type="text/css"&gt;
      &lt;script src="popup.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="main"&gt;
          &lt;ul id="open-tabs"&gt;&lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>Edit2</h2>
  
  <p>I tried using the sugestion given on an answer using the <code>.bind(this,i)</code> but still doesn't work, I added <code>console.log()</code> to see what's happening, and it seems it's not going inside the <code>addEventListener</code> heres the code with the log calls:</p>
  
  <pre><code>function changeTab(tabID){
    chrome.tabs.update(tabID,{active:false})
  }
  
  chrome.windows.getCurrent({populate: true},function (window){
    list = document.getElementById('open-tabs');
    for (var i = 0; i &lt; window.tabs.length; i++)
    {
      var li = document.createElement('li');
      var element = document.createElement('a');
      element.setAttribute('href','#');
      element.innerHTML = window.tabs[i].title;
      console.log('before');
      console.log(window.tabs[i].id);
      element.addEventListener("click",function(iVal){
        console.log('inside');
        changeTab(window.tabs[iVal].id);
      }.bind(this,i),false);
      console.log('after');
      console.log(window.tabs[i].id);
      li.appendChild(element);
      list.appendChild(li);
    }
  });
  </code></pre>
  
  <p>As you can see I have a Before and After <code>console.log()</code> as well as inside the <code>addEventListener</code> and it doesn't seem to call anything inside the <code>addEventListener</code> as you can see here:</p>
  
  <p><img src="https://i.stack.imgur.com/G2rwq.png" alt="chrome console"></p>
  
  <p>It's calling the <code>console.log</code> inside the <code>addEventListener</code> but still isn't working</p>
  
  <p><img src="https://i.stack.imgur.com/rq7hq.png" alt="chrome console 3"></p>