title: Trying to understand how to use an If statement with an event
body: <p><strong>Here is the HTML</strong></p>
  
  <pre><code>&lt;body&gt;
   &lt;div&gt;
     &lt;button&gt;
       Button 1
     &lt;/button&gt;
  
     &lt;button&gt;
      Button 2
     &lt;/button&gt;
  
     &lt;button&gt;
      Button 3
     &lt;/button&gt;
   &lt;/div&gt;
  &lt;/body&gt;    (script tag is in right place just left it out here)
  </code></pre>
  
  <p><strong>Here is my code</strong></p>
  
  <pre><code>(function () {
  
  var button= document.getElementsByTagName("button");    
  
  for (var i= 0, len= button.length; i &lt; len ;i = i + 1) {
  
  buttton[i].onclick = function () {
          alert(i)};
  
  }
  }()) 
  </code></pre>
  
  <p>So when I click on each button why are all 3 bringing back a value of 3??? Shouldn't each button bring back a different value?????? </p>