How to determine which child image was clicked within a parent in Javascript

Question

I have the following code which prompts the user to select an image:

<div id="frame1" class = "quizFrame quizFrame1">
  <p>Which image do you identify with?</p>
  <img class = "quizImg" src="images/person1.jpg" alt="" onclick ="ShowNext();" >
  <img class = "quizImg" src="images/person2.jpg" alt="" onclick = "ShowNext();">
  <img class = "quizImg"src="images/person3.jpg" alt="" onclick = "ShowNext();">
  <img class = "quizImg" src="images/person4.jpg" alt="" onclick = "ShowNext();">
</div>

Upon clicking the image I would like to determine which image was clicked.

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)?

I know I can assign IDs to each image but would like to know if there is an easier route.

http://stackoverflow.com/questions/13658021/jquery-index-in-vanilla-javascript — sinisake, Dec 17 '16 at 09:34
Event.target points to the target, element triggering the event. — ste2425, Dec 17 '16 at 09:36

Ori Drori · Accepted Answer · 2016-12-17T10:26:59.343

Use Array#indexOf to find the index of a clicked image in the array of all images:

var images = [].slice.call(document.querySelectorAll('#frame1 > .quizImg'), 0); // get all images inside frame1, and convert to array

function ShowNext(img) {   
  console.log(images.indexOf(img)); // find the index of the clicked image inside the array
}

<div id="frame1" class = "quizFrame quizFrame1">
  <p>Which image do you identify with?</p>
  <img class = "quizImg" src="https://placehold.it/60x60" alt="" onclick ="ShowNext(this);" >
  <img class = "quizImg" src="https://placehold.it/60x60" alt="" onclick = "ShowNext(this);">
  <img class = "quizImg"src="https://placehold.it/60x60" alt="" onclick = "ShowNext(this);">
  <img class = "quizImg" src="https://placehold.it/60x60" alt="" onclick = "ShowNext(this);">
</div>

Or using .addEventListener() with event delegation:

var frame1 = document.getElementById('frame1'); // find the images container
var images = [].slice.call(frame1.querySelectorAll('.quizImg'), 0); // get all images inside frame1, and convert to array

frame1

 // add an event listener that will handle all clicks inside frame1
  .addEventListener('click', function(e) {
  
   // find the index of the clicked target from the images array
  var index = images.indexOf(e.target)
  
  if(index !== -1) { // if no image was clicked
    console.log(index);
  }
});

<div id="frame1" class = "quizFrame quizFrame1">
  <p>Which image do you identify with?</p>
  <img class = "quizImg" src="https://placehold.it/60x60" alt="">
  <img class = "quizImg" src="https://placehold.it/60x60" alt="">
  <img class = "quizImg"src="https://placehold.it/60x60" alt="">
  <img class = "quizImg" src="https://placehold.it/60x60" alt="">
</div>

This provides a potential solution but i would like to retrieve only the images within frame 1. Rather than retrieving all of the images with class ".quizImg" is there any way to retrieve an array of the 4 images specifically within frame 1? — DannyMoshe, Dec 17 '16 at 10:24
Sure you can search inside a container - `document.querySelectorAll('#frame1 > .quizImg')`. See edit. — Ori Drori, Dec 17 '16 at 10:27

score 4 · Answer 2 · answered Dec 17 '16 at 09:37

Click event has .target attribute that shows actual clicked element.

document.getElementById("frame1").addEventListener("click", function(event) {
  // display the current click count inside the clicked div
  event.target.className = "clicked";
}, false);

function ShowNext() {

}

.clicked {
  border: 2px solid red;
}
img {
  width: 23%;
  float: left;
}

<div id="frame1" class="quizFrame quizFrame1">
  <p>Which image do you identify with?</p>
  <img class="quizImg" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="" onclick="ShowNext();">
  <img class="quizImg" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="" onclick="ShowNext();">
  <img class="quizImg" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="" onclick="ShowNext();">
  <img class="quizImg" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="" onclick="ShowNext();">
</div>

score 1 · Answer 3 · answered Dec 17 '16 at 09:35

1

$(document).ready(function(){
    alert($(this).attr('src'); // it will return source : images/personal1.jpg if clicked on first one
});

answered Dec 17 '16 at 09:35

Naveed Ramzan

3,565
3
25
30

1. There is no jQuery in the question 2. "_Is there a way to retrieve **the index** of the image somehow_" – Andreas Dec 17 '16 at 09:35

Sahadev · Answer 4 · 2016-12-17T10:00:14.853

Pass this with every function call:

<div id="frame1" class = "quizFrame quizFrame1">
    <p>Which image do you identify with?</p>
    <img class = "quizImg" src="images/person1.jpg" alt="" onclick ="ShowNext(this);" >
    <img class = "quizImg" src="images/person2.jpg" alt="" onclick = "ShowNext(this);">
    <img class = "quizImg"src="images/person3.jpg" alt="" onclick = "ShowNext(this);">
    <img class = "quizImg" src="images/person4.jpg" alt="" onclick = "ShowNext(this);">
</div>

Here is Javascript code to retrieve value from tag:

var Imgs = [].slice.call(document.getElementById('frame1').children);
function ShowNext(element){
    console.log(Imgs.indexOf(element));
}

zer00ne · Answer 5 · 2016-12-17T10:23:33.287

Using addEventListener() on parent element so that the click event is delegated to it's children (images). The handler is function indentify() which uses the document.images property to collect all the images. Next it iterates through a for loop and finds the exact image clicked by using the event.target property to compare the index number of the clicked element.

SNIPPET

var f1 = document.getElementById('frame1');

f1.addEventListener('click', identify, false);

function identify(e) {
  for (let i = 0; i < document.images.length; i++) {
    if (document.images[i] === e.target) {
      console.log(i);
    }
  }
}

<div id="frame1" class="quizFrame quizFrame1">
  <p>Which image do you identify with?</p>
  <img class="quizImg" src="http://placehold.it/50x50/000/fff?text=1" alt="">
  <img class="quizImg" src="http://placehold.it/50x50/000/fff?text=2" alt="">
  <img class="quizImg" src="http://placehold.it/50x50/000/fff?text=3" alt="">
  <img class="quizImg" src="http://placehold.it/50x50/000/fff?text=4" alt="">
</div>

How to determine which child image was clicked within a parent in Javascript

5 Answers5