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

当前回答

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

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

其他回答

我也遇到过类似的情况。这可能是因为脚本是在页面加载之前执行的。通过将脚本放在页面底部，我绕过了这个问题。

2015-08-23 08:18:07

这是因为在执行bundle js时元素还没有加载。

我将移动<script src="sample.js" type="text/javascript"></script>到index.html文件的底部。这样可以确保在解析和呈现所有html元素之后执行脚本。

2017-12-27 13:08:06

脚本在主体之前加载，在主体之后保留脚本

2020-01-17 11:24:56

我认为最简单的方法是使用defer。不知道为什么没人发这个答案

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="style.js" defer></script>
</head>

2022-08-17 17:05:59

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

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

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

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

2021-06-06 05:42:00

无法读取属性“addEventListener”为空

推荐文章

最新文章

标签