无法读取属性“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，但不确定。

当前回答

这个问题已经有答案了，但我喜欢对这些简单的条件使用逻辑AND(&&)操作符:

var el = document.getElementById('overlayBtn');

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

在我看来更易于阅读和简洁。

2021-04-17 13:50:22

其他回答

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

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

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

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

2021-04-08 04:58:04

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

2020-02-10 09:31:25

当“元素不存在于DOM中”或id或类名不存在，但您在脚本文件中请求时，也会发生此错误。因此，您调用的事件为空。

2022-07-12 14:13:53

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

2021-10-08 08:24:16

在窗口加载时添加所有事件监听器。无论你把脚本标签放在哪里，它都很有魅力。

window.addEventListener("load", startup);

function startup() {

  document.getElementById("el").addEventListener("click", myFunc);
  document.getElementById("el2").addEventListener("input", myFunc);

}

myFunc(){}

2017-12-30 16:18:51

无法读取属性“addEventListener”为空

推荐文章

最新文章

标签