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

当前回答

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

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

2014-09-29 19:14:37

其他回答

我只是在我的脚本标签中添加了“async”，这似乎已经解决了这个问题。我不知道为什么，如果有人能解释的话，但这对我来说很有效。我的猜测是，页面不会等待脚本加载，因此页面与JavaScript同时加载。

Async/Await使我们能够以同步的方式编写异步代码。它只是使用生成器和yield语句来“暂停”执行的语法糖，使我们能够将它分配给一个变量!

这里是参考链接- https://medium.com/siliconwat/how-javascript-async-await-works-3cab4b7d21da

2018-03-11 09:44:27

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

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

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

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

2021-06-06 05:42:00

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

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

2022-08-15 11:39:17

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

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

2017-12-27 13:08:06

我有一组引语和人名。我使用更新按钮更新与特定名称相关联的最后引用，但单击更新按钮它不更新。我包括下面的代码server.js文件和外部js文件(main.js)。

main.js(外部js)

var update = document.getElementById('update');
if (update){
update.addEventListener('click', function () {

  fetch('quotes', {
  method: 'put',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({
    'name': 'Muskan',
    'quote': 'I find your lack of faith disturbing.'
  })
})var update = document.getElementById('update');
if (update){
update.addEventListener('click', function () {

  fetch('quotes', {
  method: 'put',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({
    'name': 'Muskan',
    'quote': 'I find your lack of faith disturbing.'
  })
})
.then(res =>{
    if(res.ok) return res.json()
})
.then(data =>{
    console.log(data);
    window.location.reload(true);
})
})
}

server.js文件

app.put('/quotes', (req, res) => {
  db.collection('quotations').findOneAndUpdate({name: 'Vikas'},{
    $set:{
        name: req.body.name,
        quote: req.body.quote
    }
  },{
    sort: {_id: -1},
    upsert: true
  },(err, result) =>{
    if (err) return res.send(err);
    res.send(result);
  })

})

2016-12-23 10:20:43

无法读取属性“addEventListener”为空

推荐文章

最新文章

标签