Javascript 事件处理程序中的错误：TypeError:无法读取属性'；数据集'；空的

所以当我点击我的汉堡时，我得到了上面提到的错误。点击汉堡后，我的整个页面变为白色，当我右键点击时，什么也没有出现。问题在哪里？我在网上搜索了很多类似的问题。这里只讨论将脚本标记放在底部并编写window.onload函数。我已经把脚本标签放在了身体的底部，但这仍然在发生。 错误消息： 事件处理程序中出错：TypeError:无法读取null的属性“dataset” 在Jr（铬）-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:103527) 位于Xr.updateState（铬）-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:105004) 在铬-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:105819 在铬-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:73161 在铬-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:110691 在Array.forEach（）处 在wi.fire（铬）-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:110679) at_onBgPortMessage（chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:115134)

HTML

瞧




龙目
整体健康&更多

无礼

JS

window.onload=function（）{
常量打开=（）=>{
const nav=document.querySelector（“nav”）；
const header=document.querySelector（“header”）；
const hero=document.querySelector（“.hero”）；
导航类列表切换（“.active”）；
header.classList.toggle（“.bgdark”）；
hero.classList.toggle（“.inactive”）；
};
};

好，这里的问题是

open（）

函数是

窗口

对象上的保留方法 因此，当您在

onclick

参数上添加

open（）

时，它将触发

window.open（）

方法，该方法在没有任何参数的情况下执行时只会打开一个黑色页面（因此没有要检查的DOM）

因此，一个简单的修复方法就是将函数重命名为

窗口

对象的标准方法之外的任何东西。或者只是在js文件中添加一个匿名函数作为click事件的回调

document.querySelector('.hamburger').addEventListener('click', function(e) {
    const nav = document.querySelector("nav");
    const header=document.querySelector("header");
    const hero=document.querySelector(".hero");
    nav.classList.toggle("active");
    header.classList.toggle("bgdark");
    hero.classList.toggle("inactive");
});

这里有一些简单的小提琴

---

您似乎没有包含引发错误的代码？没错，我似乎找不到。问题中的代码没有产生错误。它看起来像是来自语法？我加上了整个错误message@Lurking这个例外似乎不是源于你的代码。我不认为名称open会成为一个问题。它的作用域是匿名函数。

document.querySelector('.hamburger').addEventListener('click', function(e) {
    const nav = document.querySelector("nav");
    const header=document.querySelector("header");
    const hero=document.querySelector(".hero");
    nav.classList.toggle("active");
    header.classList.toggle("bgdark");
    hero.classList.toggle("inactive");
});