title: Setting onclick function to <li> element
body: <p>I am trying to dynamically add onclick function to "li" tagged elements.
  But the event does not fires.
  Here is my code:</p>
  
  <pre><code>var arrSideNavButtons = [];
  var sideNavLi = document.getElementsByClassName('side-nav')[0].getElementsByTagName('li'); 
  var arrayOfSceneAudios = [scene1Audio, scene2Audio,...];
  
  for (var i = 0; i &lt; sideNavLi.length; i++) {
      sideNavLi[i].onclick = function() {
          arrayOfSceneAudios[i].play();
      }
      arrSideNavButtons.push(sideNavLi[i]);
  }
  </code></pre>
  
  <p>Is it possible to code it this way?
  If yes, what is my mistake?
  Thanks a lot.</p>