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..