Вопрос:
У меня есть 3 кнопки с названием класса “btn”; Как выбрать все кнопки с помощью addEventListener и forEach? Я не выбираю по одному HTML-коду:
<div class=»display»> <input type=»number» class=»text»> </div> <div class=»buttons»> <input type=»button» value=»1″ class=»btn»> <input type=»button» value=»2″ class=»btn»> <input type=»button» value=»3″ class=»btn»> </div>
Код 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»>