title: Loop on mouseover
body: <p>I have four images. When I mouseover them, I want each one of them to play a different sound. Well, I did that, but created different variables for each and also different functions. And in the HTML I have the container with the images and then in another <code>&lt;div&gt;</code> the audio. 
  I create a new variable that selects all images and loops over them:</p>
  
  <pre><code>var roll = document.querySelectorAll("img");
  for (var i=0; i&lt;roll.length; i++){
      roll[i].addEventListener("mouseover",function(){
         console.log(this);
         this.audio.play();
      })
  }
  </code></pre>
  
  <p>But then even that the "this" is the image it says: <code>Cannot read property 'play' of undefined</code>. And I getting confusing of how I connect the sound with the image.</p>
  
  <p>The html looks like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
     &lt;div class="down music"&gt;&lt;img id="batman" src="#"&gt;&lt;/div&gt;   
     &lt;div class="up music"&gt;&lt;img id="bane" src="#"&gt;&lt;/div&gt;
     &lt;div class="down music"&gt;&lt;img id="batman" src="#"&gt;&lt;/div&gt;
     &lt;div class="up music"&gt;&lt;img id="batman" src="#"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;audio id="batman" src="sounds/batman.wav"&gt;&lt;/audio&gt;
  &lt;audio id="bane" src="sounds/ceremony.mp3"&gt;&lt;/audio&gt;
  &lt;audio id="joker" src="sounds/free.wav"&gt;&lt;/audio&gt;
  &lt;audio id="alfred" src="sounds/mud.wav"&gt;&lt;/audio&gt;
  </code></pre>