Как добавить прослушиватель событий ко всем элементам в массиве
так что это нуби .. но я пытаюсь выполнить задание с большим усердием, чем просто загрузить ответ,
мой текущий HTML-код:
<!DOCTYPE html>
<html lang = "en" dir = "ltr">
<head>
<meta charset = "utf-8">
<title>Drum Kit</title>
<link rel = "stylesheet" href = "styles.css">
<link href = "https://fonts.googleapis.com/css?family=Arvo" rel = "stylesheet">
</head>
<body>
<h1 id = "title">Drum ? Kit</h1>
<div class = "set">
<button class = "w drum">w</button>
<button class = "a drum">a</button>
<button class = "s drum">s</button>
<button class = "d drum">d</button>
<button class = "j drum">j</button>
<button class = "k drum">k</button>
<button class = "l drum">l</button>
</div>
<footer>
Made with ❤️ in London.
</footer>
<script src = "index.js" charset = "utf-8"></script>
</body>
мои коды javascript:
document.querySelector("button").addEventListener("click", handleClick);
function handleClick() {
alert("I got clicked!");
}
document.querySelectorAll(".drum")[1, 2, 3, 4, 5, 6].addEventListener("click", handleClick);
по сути, текущий код запускает прослушиватель событий только для первого и последнего элемента массива, пытаясь добавить его ко всем 6, но застрял
Спасибо всем
@Mushroomator, я обновил html-файл, спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
document.querySelectorAll(".drum").forEach(el => el.addEventListener("click", handleClick));
Вам нужен forEach, чтобы запустить код на элементах все.
спасибо, я все еще не мог понять, как передать правильные данные для элементов, поэтому я загрузил остальную часть кода,
Вместо того, чтобы прикреплять прослушиватели к каждой кнопке, добавьте один в контейнер (set) и, используя делегация мероприятия, позвольте этому слушателю захватывать все события, которые «пузырятся» в DOM из его дочерних элементов, и вызывать функцию.
const set = document.querySelector('.set');
set.addEventListener('click', handleClick, false);
function handleClick(e) {
if (e.target.matches('button')) {
const { textContent } = e.target;
console.info(`Banging the ${textContent} drum!`);
}
}<h1 id = "title">Drum ? Kit</h1>
<div class = "set">
<button class = "w drum">w</button>
<button class = "a drum">a</button>
<button class = "s drum">s</button>
<button class = "d drum">d</button>
<button class = "j drum">j</button>
<button class = "k drum">k</button>
<button class = "l drum">l</button>
</div>
<footer>
Made with ❤️ in London.
</footer>Дополнительная документация
эй, выше и выше .. спасибо, чувак. Это был даже не тот ответ, который дал инструктор! приветствую твое величие
Вы используете все современные концепции JS, такие как querySelectorAll и addEventListener, поэтому ваш инструктор, очевидно, хорошо вас учит. Следующим уроком может стать делегирование событий. Не торопитесь, как все мы когда-то делали, и вы станете отличным разработчиком. Используйте документация mdn в полной мере. Удачного кодирования! @purelmnz PS: теперь можешь похвастаться перед друзьями :)
Спасибо, добрый человек, за совет и слова поддержки!
Не могли бы вы также поделиться соответствующими частями HTML? Лучше всего сделать это вместе с уже предоставленным JS в фрагмент в вашем посте.