javascript - 未捕获的 TypeError : button. addEventListener 不是函数

Question

我正在自学 js，我是编程新手。我被困在下面的代码上，任何帮助将不胜感激:

<div id="container">
  <h1>To-Do list</h1>
  <input type="text">
  <ul>
    <li><span>X</span> one</li>
    <li><span>X</span> two</li>
    <li><span>X</span> three</li>
  </ul>
</div>

Javascript 部分:

let li = document.getElementsByTagName("li");

let button = document.getElementsByTagName("span");

button.addEventListener("click", function() {
  console.log("clicked");
})

这会抛出一个错误，说明它不是一个函数。我的错误在哪里？

Answer 1

函数Element.getElementsByTagName()返回元素的 HTMLCollection，您需要遍历它以绑定(bind)事件。

let li = document.getElementsByTagName("li");
let buttons = document.getElementsByTagName("span");

Array.from(buttons).forEach(b => {
  b.addEventListener("click", function() {
    console.log("clicked");
  });
});

<div id="container">
  <h1>To-Do list</h1>
  <input type="text">
  <ul>
    <li><span>X</span> one</li>
    <li><span>X</span> two</li>
    <li><span>X</span> three</li>
  </ul>
</div>