title: Set onclick event to a class of elements: how to get id of the one clicked? javascript only
body: <p>The problem: </p>
  
  <p>I have 134 elements which must have an onclick event attached.
  I am doing this by now, on eeeeeeevery single one of them (and they have an ondbclick event attached too!):</p>
  
  <pre><code>&lt;div id="id1" class="name" onclick="functionName(this.id)"&gt;&lt;/div&gt;
  &lt;div id="id2" class="name" onclick="functionName(this.id)"&gt;&lt;/div&gt;
  &lt;div id="id3" class="name" onclick="functionName(this.id)"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>but read in Eloquent Javascript (chapter 14) that this is considered bad practice, since it mixes html and javascript.</p>
  
  <p>So I thought I could find a way to attach the onclick event to all of them together. I searched a few hours and tried a few things, like this: (from 'How do you set a JavaScript onclick event to a class with css' here on stackoverflow)</p>
  
  <pre><code>window.onload = function() {
      var elements = document.getElementsByClassName('nameOfTheClass');
      for(var i = 0; i &lt; elements.length; i++) {
          var OneElement = elements[i];
          OneElement.onclick = function() {
             //do something
          }
      }
  }
  </code></pre>
  
  <p>Which got the click to work on the elements, but not my function.</p>
  
  <p>My original function was receiving two values, the id and the innerHTML of the element that got clicked, and now I cannot find a way to access that information. </p>
  
  <p>I tried OneElement.id and OneElement.innerHTML just to find out that it gets the id and innerHTML of the last of the elements in the document.</p>
  
  <p>Any clues? Any help very much appreciated! :)</p>