How to know which querySelectorAll item got clicked

Question

I have this code structure:

let items = document.querySelectorAll('.item')

items.forEach(addEventListener (
    'click', function () {
        // code that will get item that got clicked
    }
))

Item's HTML looks like this:

   <div class="item" data-value="water">water</div>
   <div class="item" data-value="air">air</div>
   <div class="item" data-value="fire">fire</div>

And I want to have function that when you click on any item, item's datavalue attribute must show in console or anywhere. I just must know which element got clicked.

I tried this

items.forEach(addEventListener (
    'click', function () {
        console.log(this.getAttribute('data-value'))
    }
))

But it didn't work..

`items.forEach(addEventListener (` -> `items.forEach(item => item.addEventListener (` [Demo](https://jsbin.com/ruraxil/1/edit?html,js,console,output) — VLAZ, Sep 10 '21 at 11:48

score 1 · Answer 1 · answered Sep 10 '21 at 11:51

Try like following:

let items = document.querySelectorAll('.item')
items.forEach(item =>
  item.addEventListener (
    'click', function () {
        console.log(event.target.getAttribute('data-value'))
    }
))

<div class="item" data-value="water">water</div>
   <div class="item" data-value="air">air</div>
   <div class="item" data-value="fire">fire</div>

How to know which querySelectorAll item got clicked

1 Answers1