如何在 JS dom 中使用 forEach 选择所有按钮（无 jQuery）答案

【问题标题】：How to select all buttons with forEach in JS dom (no jQuery)如何在 JS dom 中使用 forEach 选择所有按钮（无 jQuery）
【发布时间】：2018-12-15 08:15:29
【问题描述】：

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

【问题讨论】：

你的第一个按钮的类是btn1，而不是btn。
这可能是错误发生的......我该如何申请每个它

标签： javascript dom foreach addeventlistener

【解决方案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()，您必须先使用Array.from() 将btns DOM 节点转换为数组，例如：

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">

【讨论】：

哇，这行得通。我很想知道如何通过 forEach 循环而不是 for...of 循环来做到这一点。
我也分享了这个逻辑。希望对您有所帮助！

【解决方案2】：

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

我将变量名更改为不缩写，更多出于我自己的考虑，请随时将它们改回来。

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

注意：在事件处理程序分配器函数中，您必须使用closure，否则该函数将立即触发。

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

工作：https://codepen.io/leonsegal/pen/GGbaZL

【讨论】：

谢谢你，这就是我要找的。span>