无法使用querySelector读取null的属性"addEventListener" [英] Cannot read property 'addEventListener' of null using querySelector

问题描述

我尝试使用getElementsByClassName遇到相同的错误，这很奇怪.在我的html中，将<p id="trigger-overlay">更改为

I tried getElementsByClassName it got the same error, that's strange. In my html I'd change <p id="trigger-overlay"> to

<p class="trigger-overlay">

错误

function toggleOverlay(){alert('fire');};
var triggerBttn = document.querySelector('trigger-overlay');
triggerBttn.addEventListener( 'click', toggleOverlay );

工作

function toggleOverlay(){alert('fire');};
var triggerBttn = document. getElementById('trigger-overlay');
triggerBttn.addEventListener( 'click', toggleOverlay );

推荐答案

类选择器应以.点开头:document.querySelector('.trigger-overlay');.

Class selector should start with . dot: document.querySelector('.trigger-overlay');.

MDN:: https://developer .mozilla.org/zh-CN/docs/Web/CSS/Class_selectors

这篇关于无法使用querySelector读取null的属性"addEventListener"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！