title: How to determine which child image was clicked within a parent in Javascript
body: <p>I have the following code which prompts the user to select an image:                </p>
  
  <pre><code>&lt;div id="frame1" class = "quizFrame quizFrame1"&gt;
    &lt;p&gt;Which image do you identify with?&lt;/p&gt;
    &lt;img class = "quizImg" src="images/person1.jpg" alt="" onclick ="ShowNext();" &gt;
    &lt;img class = "quizImg" src="images/person2.jpg" alt="" onclick = "ShowNext();"&gt;
    &lt;img class = "quizImg"src="images/person3.jpg" alt="" onclick = "ShowNext();"&gt;
    &lt;img class = "quizImg" src="images/person4.jpg" alt="" onclick = "ShowNext();"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Upon clicking the image I would like to determine which image was clicked. </p>
  
  <p>Is there a way to retrieve the index of the image somehow ?
  (for instance if person1 was clicked the index would be 0 or 1)? </p>
  
  <p>I know I can assign IDs to each image but would like to know if there is an easier route.</p>