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

当前回答

这是因为，人们习惯在头部本身定义他们的javascript文件，所以当你在html标签比你的javscript文件首先执行比你的html文件，所以返回的值是NULL。

解决方案:在bodytag '的末尾定义Javascript文件;

2022-08-15 11:39:17

其他回答

document.getElementById('overlayBtn');返回null，因为它在DOM完全加载之前执行。

如果你把这行代码放在

window.onload=function(){
  -- put your code here
}

然后它将毫无问题地运行。

例子:

window.onload=function(){
    var mb = document.getElementById("b");
    mb.addEventListener("click", handler);
    mb.addEventListener("click", handler2);
}


function handler() {
    $("p").html("<br>" + $("p").text() + "<br>You clicked me-1!<br>");
}

function handler2() {
    $("p").html("<br>" + $("p").text() + "<br>You clicked me-2!<br>");
}

2015-12-15 04:41:59

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

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

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

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

2021-04-08 04:58:04

我认为最简单的方法是加一个'?el前的问号:

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

2022-07-25 13:01:39

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

2022-07-12 14:13:53

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

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

2017-12-27 13:08:06

无法读取属性“addEventListener”为空

推荐文章

最新文章

标签