title: Javascript click event listener on multiple elements and get target ID
body: <p>I have a javascript file that sets an EventListener of 'click' on every element with the <code>&lt;article&gt;</code> tag. I want to get the id of the article clicked when the event fires. For some reason, my code produces nothing!</p>
  
  <p>My javascript:</p>
  
  <pre><code>articles = document.getElementsByTagName('article');
  articles.addEventListener('click',redirect(e),false);
  function redirect(e){
  alert(e.target.id);
  }
  </code></pre>
  
  <p>Why isn't this working? BTW my article setup is in a function called when the window is loaded, and i know that works for sure because that function has other stuff that work.</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>So i fixed my code so it will loop and add the listener to every article element, and now i get an alert box with nothing in it. When trying to output the e.target without the ID, i get the following message for every element:</p>
  
  <pre><code>[object HTMLHeadingElement]
  </code></pre>
  
  <p>Any suggestions?</p>
  
  <hr>
  
  <p><strong>ANOTHER EDIT</strong></p>
  
  <p>My  current javascript code:</p>
  
  <pre><code>function doFirst(){
  articles = document.getElementsByTagName('article');
  for (var i = 0; i &lt; articles.length; i++) {
      articles[i].addEventListener('click',redirect(articles[i]),false);
  }
  }
  
  function redirect(e){
  alert(e.id);
  }
  window.addEventListener('load',doFirst,false);
  </code></pre>
  
  <p>This is showing my alert boxes when the page finished loading, without considering that i haven't clicked a damn thing :O</p>