Не работает метод querySelectorAll, как исправить?

Question

[ramil456]

Я создал 6 кнопок и при каждом нажатии на любую кнопку должна срабатывать функция, а у меня функция не срабатывает при использовании метода querrySelectorAll, а если использовать querrySelector, то будет работать только первая кнопка, как исправить? P.s я только изучаю js, не бейте
Вот код js:

document.querySelectorAll('.menu-button').onclick = function () {
	document.getElementById('dialog-box').style.display = 'block'
}

Код html:

<div class="menu-button">
	<a href="#" class="menu-link">Купить</a>
</div>

Answer 1

[Алексей Уколов]

Метод querySelectorAll возвращает коллекцию элементов и у неё нет свойства onclick, метода addEventListener и т.п.
По коллекции нужно итерировать и назначать обработчик события для каждого элемента в отдельности.
Как это сделать, написано в каждом первом учебнике JavaScript.

Answer 2

[Nik Faraday]

document.querySelectorAll('.menu-button') возвращает массив элементов, а не один элемент. В вашем случае нужно так:

let buttons = document.querySelectorAll('.menu-button')
buttons.forEach(btn => {
     btn.onclick = () => {...}
});

Или другой вариант для вас, вам нужно использовать не document.querySelectorAll('.menu-button'), а

document.querySelector('.menu-button').onclick = () => { ... }

Comments

[Дмитрий Беляев]

возвращает массив элементов

не надо вводить людей в заблуждение

[Nik Faraday]

Дмитрий Беляев, ну ладно, не массива, а список узлов DOM структуры