Krok pierwszy - poczytaj o tablicach i atrybucie data - dzięki temu stworzysz działające, choć nieoptymalne w tym przypadku rozwiązanie.
Krok drugi - poczytaj o event bubbling - dzięki temu załatwisz to elegancko bez pętli (plus za darmo dostaniesz możliwość dynamicznego dodawania elementów)
Ad. krok 1 - rozwiązanie z pętlą for:
Kopiuj
<button data-type="a" data-value="1">Click me!</button>
<button data-type="a" data-value="2">Click me!</button>
<button data-type="a" data-value="3">Click me!</button>
Kopiuj
const buttons = document.querySelectorAll('[data-type=a]')
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', (event) => {
console.log(event.target.dataset.value)
})
}
CodePen: https://codepen.io/caderek/pen/GxvNyZ?editors=1011
Ten sam koncept tylko z użyciem trochę elegantszego podejścia (metody tablic, destructuring i spread operator):
Kopiuj
[...document.querySelectorAll('[data-type=a]')]
.forEach(button => button.addEventListener('click', ({ target }) => {
console.log(target.dataset.value)
}))
CodePen: https://codepen.io/caderek/pen/xWLRjN?editors=1011
Ad. krok 2 - wykorzystanie bubblingu:
Kopiuj
<div id="container">
<button data-type="a" data-value="1">Click me!</button>
<button data-type="a" data-value="2">Click me!</button>
<button data-type="a" data-value="3">Click me!</button>
</div>
Kopiuj
document
.getElementById('container')
.addEventListener('click', ({ target }) => {
if (target.dataset.type === 'a') {
console.log(target.dataset.value)
}
})
CodePen: https://codepen.io/caderek/pen/YaxpOy?editors=1011
PS
Możesz też jak sugeruje @sintloer pobierać elementy w pętli, coś w stylu:
Kopiuj
<button id="a1">Click me!</button>
<button id="a2">Click me!</button>
<button id="a3">Click me!</button>
Kopiuj
for (let i = 1; i <= 3; i++) {
document
.getElementById(`a${i}`)
.addEventListener('click', () => {
console.log(i)
})
}
CodePen: https://codepen.io/caderek/pen/LdjbqE?editors=1011
ale mocno odradzam takie rozwiązanie, już nawet pomijając to że petla jest niepotrzebna (bubbling), to wiążesz w taki sposób bardzo silnie kod js i html - co jest bardzo złą praktyką (co jeśli będziesz chciał zmienić numery albo zmienić kolejność elementów na stronie?)