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


当前回答

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

其他回答

感谢@Rob M.的帮助。这是最后一段代码的样子:

function swapper() {
  toggleClass(document.getElementById('overlay'), 'open');
}

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

  var text = document.getElementById('overlayBtn');
  text.onclick = function(){
    this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
    return false;
  };
}

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

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

这只是因为你的JS在HTML部分之前加载,所以它找不到那个元素。只要把你的整个JS代码放在一个函数中,当窗口被加载时,这个函数将被调用。

你也可以把Javascript代码放在html下面。

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

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

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