未捕获的类型错误: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';
})

为什么我的代码不起作用addEventListener函数显示无效

Answer 1

.getElementsByClassName()返回元素列表。为了附加事件侦听器，您需要使用循环或元素的索引。请检查以下示例：

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");将为您提供一个具有该元素的元素数组，即使只有1个。

您可以使用document.getQuerySelector(".grid-item");，这将为您提供单一元素