CODEWITHSUNDEEP
javascript
Diana C
Diana C

Reputation: 11

Get ID of Clicked element class and return this ID as Value using JavaScript

I'm currently learning some Javascript.

I have come to the DOM manipulation point however I am stuck searching on how to solve the following:

I have 4 images with the same class and want to return their ID based on the image clicked by the user. I want to store this ID as a variable and then compare with some other data.

I believe I should be using event listeners but I can figure out how to return the ID and store its value to further compare this value within other functions.

HTML

<img id="blue" class="bubble" src="Images/bubble-blue.png">
<img id="green" class="bubble" src="Images/bubble-green.png">
<img id="pink" class="bubble" src="Images/bubble-pink.png">
<img id="purple" class="bubble" src="Images/bubble-purple.png">

so as per the images, i want to determine which bubble was clicked and compare with a bubble selected by the computer.

so I want to create a function which will return the ID either blue/pink/purple/green as a value.

Upvotes: 0

Views: 758

Answers (2)

AbsoluteBeginner
AbsoluteBeginner

Reputation: 2255

Why don't you use event delegation?

wrapper.onclick = e => {
  let el = e.target;
  if (el.className != "bubble") return;
  console.log(el.id);
}
<div id="wrapper">
  <img id="blue" class="bubble" src="https://placeimg.com/50/50/nature">
  <img id="green" class="bubble" src="https://placeimg.com/50/50/nature">
  <img id="pink" class="bubble" src="https://placeimg.com/50/50/nature">
  <img id="purple" class="bubble" src="https://placeimg.com/50/50/nature">
</div>

Upvotes: 0

esqew
esqew

Reputation: 44698

You can get information about the element that triggered a specific event listener by reading the associated event's Event.currentTarget property:

// apply the event listener to all images
document.querySelectorAll('img').forEach((element) => {
  element.addEventListener('click', event => {
    // event variable has `currentTarget` attribute, which is a reference to the object that triggered the listener
    // in this context, you can use it in place of a similar call to something like document.querySelector(), etc.
    const imageId = event.currentTarget.id;
    // do whatever processing you need on the `id` string by referencing `imageId`
    console.log(imageId);
  });
});
<img src="http://placekitten.com/g/200/200" id="kitten1" />
<img src="http://placekitten.com/g/200/200" id="kitten2" />
<img src="http://placekitten.com/g/200/200" id="kitten3" />
<img src="http://placekitten.com/g/200/200" id="kitten4" />

Alternative version, added by @connexo:

const kittens = document.querySelectorAll('img.kitten'); // get a collection of kitten images
for (const kitten of kittens) { // iterate over the collection
  kitten.addEventListener('click', () => { // add a click listener to each kitten
    console.log(kitten.id); // log that kitten's id when the kitten gets clicked
  });
};
<img src="http://placekitten.com/g/200/200" id="kitten1" class="kitten" />
<img src="http://placekitten.com/g/200/200" id="kitten2" class="kitten" />
<img src="http://placekitten.com/g/200/200" id="kitten3" class="kitten" />
<img src="http://placekitten.com/g/200/200" id="kitten4" class="kitten" />

Upvotes: 2

Related Questions