未捕获的TypeError：button.addEventListener不是函数

Question

I am learning js on my own and I am new in programming. I am stuck on the below code and any help will be much appreciated:

<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 part:

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

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

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

This throwing an error saying that it is not a function. Where is my mistake?

Answer 1

The function Element.getElementsByTagName() returns a HTMLCollection of elements, you need to loop over it to bind the events.

 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> 

Answer 2

getElementsByTagName returns a list of elements

we can addEventListener on every element

 let li = document.getElementsByTagName("li"); let button = document.getElementsByTagName("span"); console.log(button); // list of elements // and we have to addEventListener on every element Array.prototype.map.call(button, (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> 

Or we can addEventListener on parent element ( ul for example):

document.querySelector('ul').addEventListener("click", function(e) {
  console.log(e.target); // this will helps us to figure out on what exact element a click was made
  console.log("clicked");
})

Answer 3

You could just iterate over the buttons like so:

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

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

[].forEach.call(buttons, function(button) {
    button.addEventListener("click", function() {
        console.log("You clicked!");
    });
});