无法读取属性“addEventListener”为空

我必须使用香草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，但不确定。

当前回答

您可以将属性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就运行脚本

2021-08-18 16:42:58

其他回答

如果你的js代码是外部文件，使用这种方法:

<script src="filename.js" defer></script>

如果您的代码是内部文件，则使用DOMContentLoaded

以上两种方法将确保DOM在执行js代码之前完全加载!

2021-04-08 04:58:04

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

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

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

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

2021-06-06 05:42:00

当我试图通过Id获取一个类的元素时，我遇到了这个问题。检查并确认通过正确的属性(例如id或class)获取元素。否则就会出现这个错误

2022-03-22 00:09:58

我最近得到了这个问题，我发现我在getElementById和querySelector中提供了一个错误的类名。所以，我建议也交叉检查你的脚本和html文件中的类名和id名。

2021-10-08 08:24:16

我认为最简单的方法是在添加事件监听器之前检查el不为空:

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

2014-09-29 19:14:37

无法读取属性“addEventListener”为空

推荐文章

最新文章

标签