时间戳

首页 > 解决方案 > 如何在 JS dom 中使用 forEach 选择所有按钮（无 jQuery）

javascript - 如何在 JS dom 中使用 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>

JS代码：

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

  btn.addEventListener("click", buttons);

  function buttons() { 
   display.value = btn.value;
   };

标签： javascriptdomforeachaddeventlistener

解决方案

你可以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">

对于 using forEach()，您必须btns首先使用以下方式将 DOM 节点转换为数组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">

推荐阅读