CODEWITHSUNDEEP
javascripthtml
DannyMoshe
DannyMoshe

Reputation: 6255

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

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.

Upvotes: 2

Views: 2588

Answers (5)

Ori Drori
Ori Drori

Reputation: 191976

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>

Upvotes: 5

zer00ne
zer00ne

Reputation: 43880

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>

Upvotes: 1

Sahadev
Sahadev

Reputation: 1448

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));
}

Upvotes: 1

Justinas
Justinas

Reputation: 43451

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>

Upvotes: 4

Naveed Ramzan
Naveed Ramzan

Reputation: 3593

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

Upvotes: 1

Related Questions