Javascript pokazywanie elementów

Question

Witam, 
dajmy na to mam 5 elementów HTML

<div class="items">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
</div>

I jak wykonać to, żeby po kliknięciu dajmy w item 2, w consoli pokazało jaki ma textContent? :)
Po kliknięciu w item 3 - item 3 ma być wyświetlone w consoli.
Prosiłbym o kod, tak bym mógł przeanalizować i dostosować pod swój skrypt. Dziękuje! :)  

Answer 1

const items = document.querySelector('.items');
items.addEventListener('click', ({ target }) => console.log(target.textContent))

 

Comments

Tych <div class="items"></div> jest o wiele więcej, i bierze tylko pod uwagę tą pierwszą, ponieważ jest querySelector bez All. A z All wyskakuje że  items.addEventListener is not a function

---

w kodzie jaki pokazałeś jest jeden :) ale to nic nie zmienia, przerób sobie po prostu odpowiednio ten kod co Ci pokazałem.

---

Tak, zapomniałem napisać

Answer 2

function handleClick () {
   console.log(this.textContent);
}

var items = document.querySelector('.item');

for (var i = 0; i < items.length; i++) {
    var item = items[i];
    item.addEventListener('click', handleClick)
}

Pisz jakbyś miał jakieś pytania :) 

Comments

Tych <div class="items"></div> jest o wiele więcej, i bierze tylko pod uwagę tą pierwszą, ponieważ jest querySelector bez All. A z All wyskakuje że  items.addEventListener is not a function

Answer 3

Podepnij się pod parenta elementów o klasie items i zastosuj event delegation żeby odczytywać textContent, gdy klikniesz w element o klasie item.