Как выбрать все кнопки с функцией forEach в JS dom (без jQuery)

Автор admin На чтение 2 мин Просмотров 21 Опубликовано 31 марта, 2025

Вопрос: У меня есть 3 кнопки с названием класса "btn"; Как выбрать все кнопки с помощью addEventListener и forEach? Я не выбираю по одному HTML-коду: Код JS: const display = document.querySelector(".text"), btn = document.querySelectorAll(".btn");

Вопрос:

У меня есть 3 кнопки с названием класса “btn”; Как выбрать все кнопки с помощью addEventListener и forEach? Я не выбираю по одному HTML-коду:

Код JS:

const display = document.querySelector(«.text»), btn = document.querySelectorAll(«.btn»); btn.addEventListener(«click», buttons); function buttons() { display.value = btn.value; }; Лучший ответ:

Вы можете использовать функцию встроенного массива js foreach на кнопках, выбранных querySelectorAll.

Я изменил имена переменных, чтобы они были сокращены, больше для меня, не стесняйтесь их менять.

В принципе, вы перебираете все кнопки и добавляете обработчик событий к каждому из них.

Примечание. В функции назначения обработчика события вам нужно будет использовать закрытие, иначе функция сразу начнет срабатывать.

const display = document.querySelector(«.text»), buttons = document.querySelectorAll(«.btn»); buttons.forEach(button => button.addEventListener(«click», alterDisplayValue(button))); function alterDisplayValue(button) { return function() { display.value = button.value; } };

Вы также можете использовать встроенную функцию в foreach для установки обработчика кликов:

const display = document.querySelector(«.text»), buttons = document.querySelectorAll(«.btn»); buttons.forEach(button => button.addEventListener(«click», function() { display.value = button.value; }));

рабочая:

Ответ №1

Вы можете использовать for…of для этого как:

const btns = document.querySelectorAll(‘.btn’); for (const btn of btns) { btn.addEventListener(‘click’, function() { console.log(this.value); }); }<input type=»button» value=»1″ class=»btn»> <input type=»button» value=»2″ class=»btn»> <input type=»button» value=»3″ class=»btn»>

Для использования forEach() вам придется преобразовать btns DOM btns в массив сначала с помощью Array.from() например:

const btns = document.querySelectorAll(‘.btn’); Array.from(btns).forEach(function(btn) { btn.addEventListener(‘click’, function() { console.log(this.value); }); });<input type=»button» value=»1″ class=»btn»> <input type=»button» value=»2″ class=»btn»> <input type=»button» value=»3″ class=»btn»>