title: How to get the index of what is clicked inside the div.?
body: <blockquote>
    <p>The HTML file has a video player using  and  that shows the images. The Js file has an array of image and videos. I have to play a particular video on a particular image click. when image[0] is clicked video[0] should play and likewise. I have added a click event to all the images inside this div. how to identify index of image that was clicked by the person so what I can assign the URL (source)of the video at that same index in video array to the src of my main video player. I have made some code here</p>
  </blockquote>
  
  <pre><code> &lt;html&gt;
   &lt;head&gt;
   &lt;style&gt;
   .leftElement {
  float: left;
    }
  
    .rightElement {
  float: right;
    }
    &lt;/style&gt;
    &lt;/head&gt;
   &lt;body&gt;
  
    &lt;div class="blocks"&gt;
  
              &lt;div id="showThumbnailDiv" style="height: 250px; width: 480px;
                 overflow:scroll; margin-top: 7%; margin-left: 8%;" class="scroll  
                 leftElement"&gt;    
                         &lt;script src="showdynamicimages.js"&gt;&lt;/script&gt;
              &lt;/div&gt;
  
              &lt;div id="videoplayer" class="rightElement" style="margin-top: 7%; 
                   margin-right: 8%;"&gt;
  
                       &lt;video id="mainVideo" width="480" height="250" autoplay controls&gt; 
                       &lt;/video&gt;
              &lt;/div&gt;
  
      &lt;/div&gt;
  
     &lt;div&gt;position_click&lt;/div&gt;
  
   &lt;/body&gt;
   &lt;/html&gt; 
  </code></pre>
  
  <p>Js File is </p>
  
  <pre><code>                    var position_click;
                      var image =[
  
  
  
      "http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/1p/5y/p01p5ygs.jpg",
      "http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy-images.jpg",
       "http://static3.businessinsider.com/image/52cddfb169beddee2a6c2246/the-29-coolest-us-air-force-images-of-the-year.jpg", 
  
       "http://thatrandomwebsite.com/uploads/3/2/8/4/3284350/7497257_orig.jpg",   
        "http://justsomething.co/wp-content/uploads/2013/11/33-most-powerful-images-23.jpeg",
       "http://blog.gettyimages.com/wp-content/uploads/2012/10/81076116-Chip-Somodevilla-Getty-Images-e1351541533518.jpg",
      "http://www.thehindu.com/multimedia/dynamic/01532/THINGSSEE_INTERNET_1532062g.jpg", 
       "http://wpmedia.o.canada.com/2014/04/gv_0402_newspicofday_0011.jpg", 
      "http://www.freelive3dwallpapers.com/wp-content/uploads/2014/03/images-7.jpg"];
  
  
           var videos = [
                "uploaded_videos/outro_en.mp4",
                "uploaded_videos/alu_blech_en.mp4",
                "uploaded_videos/alu_guss_en.mp4",
                 "uploaded_videos/b_saeule_en.mp4",
                 "uploaded_videos/intro_en.mp4"];
  
  
         for( var i=0; i&lt;10; i++)
              {    
                   var elem = document.createElement("img");
                   elem.setAttribute("src", image[i]);
                   elem.setAttribute("height", "120");
                   elem.setAttribute("width", "150");
                   elem.setAttribute("alt", "Unable to display Image");
                   elem.setAttribute("class","thumbnail");
                   document.getElementById("showThumbnailDiv").appendChild(elem);
              }
  
             var image = document.querySelectorAll(".thumbnail");
             for (var i = 0; i &lt; image.length; i++) {
  
                    image[i].addEventListener('click', clickHandler, false);
               }
  
            function clickHandler(el) {
  
                   var mainVideo = document.getElementById("videoplayer");
                   mainVideo.src = videos[0];
                }
  </code></pre>
  
  <blockquote>
    <p>Please suggest how can I proceed here..???</p>
  </blockquote>