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


当前回答

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

其他回答

正如其他人所说,问题是脚本在页面(特别是目标元素)加载之前执行。

但我不喜欢重新排列内容的解决方案。

首选的解决方案是在页面onload事件上放置一个事件处理程序,并在那里设置监听器。这将确保在执行赋值之前加载页面和目标元素。如

    <script>
    function onLoadFunct(){
            // set Listener here, also using suggested test for null
    }
    ....
    </script>

    <body onload="onLoadFunct()" ....>
    .....

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

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

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

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

我认为最简单的方法是使用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>