Javascript 如何在JSDOM中使用forEach选择所有按钮（无jQuery）

我有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>

您可以使用以下方法进行此操作：

const btns=document.queryselectoral（'.btn'）；
用于（基站的常数btn）{
btn.addEventListener（'click'，function（）{
console.log（this.value）；
});
}

---

您可以在querySelectorAll选择的按钮上使用js内置数组函数foreach

我把变量名改成了未加修饰的，更多的是为了我自己，请随意把它们改回来

基本上，您循环所有按钮，并为每个按钮添加一个事件处理程序

注意：在事件处理程序赋值器函数中，必须使用，否则该函数将立即启动

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;
}));

---

工作：

您的第一个按钮具有类

btn1

，而不是

btn

。这可能是错误发生的。。。我怎样才能申请每一项呢哇，这很有效。我很想知道如何通过forEach循环而不是for…of循环来实现这一点。我也分享了这种逻辑。希望有帮助！谢谢，这就是我要找的。

const
    display = document.querySelector(".text"),
    buttons = document.querySelectorAll(".btn");

buttons.forEach(button => button.addEventListener("click", function() {
    display.value = button.value;
}));