title: nodeList gives only last item with onClick
body: <p>I have a JSON file which gives me every country, and I place these within <code>&lt;li&gt;</code> tags. </p>
  
  <p>I want to loop through this list, and put a click event on every <code>&lt;li&gt;</code>, which it does. But no matter what I click on, I always get the last item in the list returned to me. What am I missing? </p>
  
  <p>I want the item I'm clicking returned.</p>
  
  <pre><code>function lists() {
      var items = document.querySelectorAll('#Countries&gt;ul&gt;li');
      for (i = 0; i &lt; items.length; i++) {   
         var item = items[i];
         item.onclick = function() {
            console.log(item);
         }
      }
  }
  </code></pre>