Question

我试图单击一个按钮，然后将页面上的覆盖显示更改为无。在控制台中，它告诉我startButton.addEventListener不是函数。有人可以帮我找到错误吗？

const letters = document.getElementById('qwerty');
const keyWords = document.getElementById('phrase');
const startButton = document.getElementsByClassName('btn__reset');
const overlay = document.getElementsByClassName('main-container');
var missed = 0;

startButton.addEventListener("click", function(){
overlay.style.display = 'none';
});

Answer 1

getElementsByClassName不返回单个元素-它返回所有匹配元素的类似数组HTMLCollection的元素。您无法将事件侦听器附加到非元素。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

如果您只想获取与类匹配的第一个元素，则可以使用 const startButton = document.querySelector('.btn__reset');（点表示选择器是一个类名）

或访问getElementsByClassName返回值的第一项，如下所示： const startButton = document.getElementsByClassName.item(0);（您可能想先检查其是否存在）

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

Answer 2

就目前而言，您的'startButton'常量实际上是从中返回一个集合：

document.getElementsByClassName('btn__reset');

即使它只是一个对象的集合，您也需要更深一层以获得正确的对象

我建议使用

.getElementById('buttonID');

相反。这样只会返回一个元素，将您的侦听器附加到该元素。

Answer 3

使用getElementById获取按钮，它可以正常工作

let startButton = document.getElementById('button');

startButton.addEventListener("click", function(){
  console.log('yes');
});

<button id="button">Go!</button>

添加事件侦听器未连接到按钮

3 个答案: