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

Question

我正在尝试单击一个按钮，然后会将我页面上的覆盖显示更改为 none。在控制台中，它告诉我 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

使用 getElementById 获取按钮，它有效

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

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

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

Answer 2

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

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

如果你只想得到第一个匹配 class 的元素，你可以使用 const startButton = document.querySelector('.btn__reset');（点表示选择器是一个 class 名称）

或者像这样访问 getElementsByClassName 的 return 值的第一项： const startButton = document.getElementsByClassName.item(0);（您可能想先检查它是否存在）

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

Answer 3

按照目前的情况，您的 'startButton' 常量实际上是 return 中的一个集合：

document.getElementsByClassName('btn__reset');

即使它只是一个对象的集合，您也需要更深入地了解正确的对象

我建议使用

.getElementById('buttonID');

相反。这只会 return 一个元素来附加你的听众。

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

Add Event Listener not Connecting to Button

javascript

addeventlistener

dom-events