如何解决添加事件侦听器未连接到按钮
我试图单击一个按钮,然后将页面上的覆盖显示更改为无。在控制台中,它告诉我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';
});
解决方法
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
,就目前而言,您的'startButton'常量实际上是从中返回一个集合:
document.getElementsByClassName('btn__reset');
即使它只是一个对象的集合,您也需要更深一层以获得正确的对象
我建议使用
.getElementById('buttonID');
相反。这样只会返回一个元素,将您的侦听器附加到该元素。
,使用getElementById获取按钮,它可以正常工作
let startButton = document.getElementById('button');
startButton.addEventListener("click",function(){
console.log('yes');
});
<button id="button">Go!</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。