Как я могу исправить проблему с методом querySelectorAll, который не работает?

Question

Ануфрий

javascript

Как я могу исправить проблему с методом querySelectorAll, который не работает?

Как мне обработать нажатие на каждую из 6 созданных кнопок? Я использовал метод `querySelectorAll`, но функция не срабатывает. Если использовать `querySelector`, то срабатывает только на первой кнопке. Как это исправить? Вот мой код на JavaScript:
```javascript
document.querySelectorAll('.menu-button').onclick = function () {
    document.getElementById('dialog-box').style.display = 'block'
}
```
И HTML:
```html
<div class="menu-button">
    <a href="#" class="menu-link">Купить</a>
</div>
```

18 января 2024 г. 20:19

Ответы на вопрос 3

Похожие вопросы

Answer 1

Метод `querySelectorAll` возвращает `NodeList` объект, содержащий все элементы, которые удовлетворяют указанному CSS-селектору. Он не может напрямую обрабатывать события, как это делает одиночный элемент, поэтому присвоение обработчика событий напрямую к результату `querySelectorAll` не сработает. Вместо этого вам нужно проитерировать по всем элементам, которые были получены с помощью `querySelectorAll`, и индивидуально настроить обработчик событий для каждой кнопки.

Вот пример исправленного кода:

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

Этот код пройдет по всем элементам, которые имеют класс `menu-button`, и добавит каждому из них обработчик клика, открывающий блок с `id='dialog-box'`.

Полный пример, с корректным HTML и JavaScript:

**HTML**
```html
<div id="dialog-box" style="display: none;">Диалоговое окно</div>

<div class="menu-button">
    <a href="#" class="menu-link">Кнопка 1</a>
</div>
<div class="menu-button">
    <a href="#" class="menu-link">Кнопка 2</a>
</div>
<div class="menu-button">
    <a href="#" class="menu-link">Кнопка 3</a>
</div>
<div class="menu-button">
    <a href="#" class="menu-link">Кнопка 4</a>
</div>
<div class="menu-button">
    <a href="#" class="menu-link">Кнопка 5</a>
</div>
<div class="menu-button">
    <a href="#" class="menu-link">Кнопка 6</a>
</div>
```

**JavaScript**
```javascript
document.querySelectorAll('.menu-button').forEach(function(button) {
    button.onclick = function () {
        document.getElementById('dialog-box').style.display = 'block';
    };
});
```

Кроме того, вместо `onclick` вы можете использовать `addEventListener()`, который позволяет добавлять несколько обработчиков на одно и тоже событие и обеспечивает большую гибкость:

```javascript
document.querySelectorAll('.menu-button').forEach(function(button) {
    button.addEventListener('click', function () {
        document.getElementById('dialog-box').style.display = 'block';
    });
});
```

Это также лучшая практика в современном JavaScript, поскольку `addEventListener` позволяет избежать непреднамеренного перезаписывания обработчиков событий, если есть необходимость в их множественной установке.

Answer 2

<code class="javascript">document.querySelectorAll('.menu-button')</code> возвращает массив элементов, а не один элемент. В вашем случае нужно так: <br/> <br/> <br/> Или другой вариант для вас, вам нужно использовать не <code class="javascript">document.querySelectorAll('.menu-button')</code> , а

Answer 3

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