无法读取 null 的属性“addEventListener”

IT技术 javascript function getelementbyid addeventlistener
2021-02-10 04:43:10

我必须在一个项目中使用 vanilla JavaScript。我有几个功能，其中之一是打开菜单的按钮。它适用于目标 id 存在的页面，但在 id 不存在的页面上会导致错误。在函数找不到 id 的那些页面上，我收到“无法读取 null 属性 '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，但不确定是否准确。

6个回答

我认为最简单的方法el是在添加事件侦听器之前检查它是否为空：

var el = document.getElementById('overlayBtn');
if(el){
  el.addEventListener('click', swapper, false);
}
它将null在反应组件安装之前！
2021-03-17 04:43:10
在 <body/> 之后移动 <script src="..."></script>
2021-03-21 04:43:10
惊人的。这样做的伎俩。我还将 onclick 函数移到了 if 语句中。我在下面发布了最终代码。
2021-03-29 04:43:10
谢谢你 :D 正是我要找的……我的应用程序中有多个侦听器，并且侦听器分布在不同的视图中。如果该元素出现在页面上，它就是在破坏我的 JS
2021-04-06 04:43:10
我已将此方法与以下stackoverflow.com/a/1760268/5923833 结合以解决此错误的问题。在我的情况下，错误的触发器是点击页面的输入或重新加载，然后将选项卡更改为另一个页面。现在，使用您的代码和其他解决方案，我能够防止页面加载错误，然后在用户返回选项卡时添加事件侦听器。
2021-04-06 04:43:10

似乎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>");
}

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

是的，我认为这个问题有多种解决方案，具体取决于场景。
2021-03-22 04:43:10
正确答案。
2021-03-26 04:43:10

脚本在正文之前加载，在正文之后保留脚本

我遇到了同样的错误，但执行空检查似乎没有帮助。

我找到的解决方案是将我的函数包装在整个文档的事件侦听器中，以检查 DOM 何时完成加载。

document.addEventListener('DOMContentLoaded', function () {
    el.addEventListener('click', swapper, false);
});

我认为这是因为我使用的框架 (Angular) 正在动态更改我的 HTML 类和 ID。

其它你可能感兴趣的问题
上一篇创建“Hello World”WebSocket 示例 下一篇如果找不到源图像，如何显示替代图像？（onerror 在 IE 中工作但不在 mozilla 中）