未捕获的类型错误：c.addEventListener 不是函数……？ javascript DOM 事件

Question

var c = document.getElementsByClassName("grid-item");
console.log("Connected");
console.log(c);
c.addEventListener("click",function(){
  c.textContent = 'X';
})


c.addEventListener("dblclick",function(){
  c.textContent = 'O';
})

Why my code is not working the addEventListener function show invalid

Answer 1

.getElementsByClassName() returns a list of elements.In order to attach an event listener, you need to use a loop or use the index of the element. Please check the below example:

 var c = document.getElementsByClassName("grid-item"); console.log("Connected"); console.log(c); c[0].addEventListener("click",function(){ c[0].textContent = 'X'; }) c[0].addEventListener("dblclick",function(){ c[0].textContent = 'O'; })

 <div class="grid-item">Hello</div>

Answer 2

document.getElementsByClassName("grid-item"); will give you an array of elements that have that, even if there's only 1.

you can use document.getQuerySelector(".grid-item"); instead and that will give you the single element