无法使用 querySelector 读取 null 的属性“addEventListener”[关闭]答案

【问题标题】：Cannot read property 'addEventListener' of null using querySelector [closed]无法使用 querySelector 读取 null 的属性“addEventListener”[关闭]
【发布时间】：2016-01-14 22:56:36
【问题描述】：

我尝试了 getElementsByClassName 它得到了同样的错误，这很奇怪。在我的 html 中，我会将 <p id="trigger-overlay"> 更改为

<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'); - 缺少类选择器(.)

标签： javascript jquery

【解决方案1】：

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

MDN： https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

【讨论】：