javascript - 如何在 JS dom(无 jQuery)中使用 forEach 选择所有按钮

Question

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

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