Geting data-index of images with same className by using eventListener

Asked Oct 01 '21 at 16:13

Active Oct 01 '21 at 16:16

Viewed 32 times

Let's assume that I have ten images with different data-index but same class and src such as:

<img src="images/image.png"  class="image" data-index="${index})">

And I want to reach the data-index of clicked image with eventListener

const image= document.getElementsByClassName('image');

image.forEach(el => el.addEventListener('click', function() {
     console.log(el.getAttribute('data-index'));

}));

But, I get the error which says image.forEach is not a function. How can I solve this? How can I get the data-index of clicked image. This task needed to be done with eventListener. It cannot be done with onClick because some other parts are failing otherwise. Also, these images are printed by using innerHTML in JS code.

So basically, I have images with same attributes but only not data-index. How can I reach the data-index of clicked image?

edited Oct 01 '21 at 16:16

asked Oct 01 '21 at 16:13

Caeculus

1

Where is `remove` in your existing code? – Hassan Imam Oct 01 '21 at 16:14
Edited. It was a mistake. – Caeculus Oct 01 '21 at 16:14
also highly advice not to use `getElementsByClassName` anymore. Use `querySelector` or `querySelectorAll` instead. – tacoshy Oct 01 '21 at 16:15
Use `Array.from()` to convert to an array. – Hassan Imam Oct 01 '21 at 16:16
if you do `console.log(image)` what do you get? – Alan Omar Oct 01 '21 at 16:17
`HTMLCollection(3) [img.image, img.image, img.image] length: 0 [[Prototype]]: HTMLCollection` – Caeculus Oct 01 '21 at 16:20

Geting data-index of images with same className by using eventListener

0 Answers0