我必须使用香草JavaScript的项目。我有几个功能,其中之一是打开菜单的按钮。它在目标id存在的页面上工作,但在id不存在的页面上导致错误。在那些页面上,函数找不到id,我收到一个“不能读取属性'addEventListener'的空”错误,我的其他函数都不起作用。

下面是打开菜单的按钮的代码。

function swapper() {
toggleClass(document.getElementById('overlay'), 'open');
}

var el = document.getElementById('overlayBtn');
el.addEventListener('click', swapper, false);

var text = document.getElementById('overlayBtn');
text.onclick = function(){
this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
return false;
};

我该怎么处理呢?我可能需要将这段代码全部包装在另一个函数中,或者使用if/else语句,以便它只搜索特定页面上的id,但不确定。


当前回答

这只是因为你的JS在HTML部分之前加载,所以它找不到那个元素。只要把你的整个JS代码放在一个函数中,当窗口被加载时,这个函数将被调用。

你也可以把Javascript代码放在html下面。

其他回答

我遇到了同样的问题,并检查null,但它没有帮助。因为脚本是在页面加载之前加载的。因此,只需将脚本放在结束体标记之前就可以解决问题。

使用可选的链接操作符(?.)将在元素不存在的页面上返回undefined,而不是抛出错误。例子;

el?.addEventListener('click', swapper, false);

您的脚本可能被放置在HTML的head标记中,并且在DOM加载之前加载。有两种解决方案:

将脚本标记放在body结束标记(</body>)之前。 将async关键字添加到脚本标记中。

<script async src="script.js"></script> .js

使用async,文件将异步下载,然后在下载完成后立即执行。

我更喜欢第二种选择。点击这里阅读更多关于async和defer的内容

您可以将属性defer添加到脚本标记中。您看到这个错误的原因是因为脚本在DOM加载之前运行。

<!DOCTYPE html > < html lang =“en”> < >头 < meta charset = " utf - 8 " > <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <标题>文档< /名称> <link rel="stylesheet" href="css/styles.css"> <script src="scripts/main.js" defer="defer"></script> .js > < /头

Defer是一个布尔值,表示一旦解析完DOM就运行脚本

这只是因为你的JS在HTML部分之前加载,所以它找不到那个元素。只要把你的整个JS代码放在一个函数中,当窗口被加载时,这个函数将被调用。

你也可以把Javascript代码放在html下面。