单击一个按钮应记录其各自的索引（例如，“按钮0单击”，“按钮1单击”等）。 const buttons = document.queryselectorall（“。btn”）; for（让i = 0; i ...

Question

const buttons = document.querySelectorAll(".btn");

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
        console.log("Button " + i + " clicked");
    });
}

<button type="button" class="btn">Button 1</button>
<button type="button" class="btn">Button 2</button>
<button type="button" class="btn">Button 3</button>
<button type="button" class="btn">Button 4</button>
<button type="button" class="btn">Button 5</button>

在某些情况下，控制台输出与预期按钮索引不符。

我做错了什么，我该如何解决？

您的代码似乎有效。但是，请考虑委派

Answer 1

document.querySelector('nav').addEventListener("click", (e) => {
  const tgt = e.target.closest('button.btn');
  if (!tgt) return; // not a button
  console.log(tgt.textContent, 'clicked')
});

<nav>
  <button type="button" class="btn">Button 1</button>
  <button type="button" class="btn">Button 2</button>
  <button type="button" class="btn">Button 3</button>
  <button type="button" class="btn">Button 4</button>
  <button type="button" class="btn">Button 5</button>
</nav>