Tengo esta estructura de código:
let items = document.querySelectorAll('.item') items.forEach(addEventListener ( 'click', function () { // code that will get item that got clicked } ))
El HTML del elemento se ve así:
<div class="item" data-value="water">water</div> <div class="item" data-value="air">air</div> <div class="item" data-value="fire">fire</div>
Y quiero tener una función que cuando haga clic en cualquier elemento, el atributo de datavalue
de datos del elemento debe mostrarse en la consola o en cualquier lugar. Solo debo saber en qué elemento se hizo clic.
probé esto
items.forEach(addEventListener ( 'click', function () { console.log(this.getAttribute('data-value')) } ))
Pero no funcionó..
Intenta lo siguiente:
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>