title: JavaScript adding events to elements of same classname
body: <p>I am generating some elements after receiving a JSON. Those elements with classname "tipoGenero" have some CSS. I want that when any of those elements are clicked, display the value of the <code>&lt;span&gt;</code>. However, it works and generates the events, but whatever element I click I only get the value of the last one. </p>
  
  <pre><code>for (var i = 0; i &lt; parsedText.length; i++) {
      dato += "&lt;div class='tipoGenero'&gt;";
      dato += "&lt;img src=/logos/" + parsedText[i].imagen + "&gt;";
      dato += "&lt;span&gt;" + parsedText[i].nombre + "&lt;/span&gt;";
      dato += "&lt;/div&gt;";
  } 
  document.getElementById('generos').innerHTML = dato;
  //generates events for class items 
  var classname = document.getElementsByClassName("tipoGenero");
  for (var i = 0; i &lt; classname.length; i++) {
      valor = classname[i].children[1].textContent;
      alert(valor);
      classname[i].addEventListener('click', function() { myFunction(valor); }, false);
  }
  
  function myFunction(text) {
      alert(text);
  }
  </code></pre>