无法读取null的属性“addEventListener”

我必须使用香草JavaScript的一个项目。 我有几个function,其中之一是打开菜单的button。 它在存在目标标识的页面上工作,但在标识不存在的页面上导致错误。 在那些function无法findid的页面上,我收到“无法读取属性”addEventListener“空”错误,我的其他function都没有工作。

下面是打开菜单的button的代码。

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语句,以便仅在特定页面上searchid,但不能确定。 相当新的Javascript。

预先感谢您的帮助,并让我知道,如果额外的代码将使这更容易回答。

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

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

看来document.getElementById('overlayBtn');

返回空值,因为它在DOM完全加载之前执行。 如果你把这行代码放在window.onload = function(){ – 把你的代码放在这里}然后它将运行没有问题。

例:

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

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

我发现的解决scheme是将我的函数封装在整个文档的事件侦听器中,以检查DOM何时完成加载。

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

我认为这是因为我正在使用一个框架(Angular),dynamic地改变我的HTML类和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; }; } 

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

但我不喜欢重新sorting内容的解决scheme。

首选的解决scheme是在页面onload事件上放置一个事件处理程序,并在那里设置Listener。 这将确保页面和目标元素在分配执行之前被加载。 例如

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

我收集了一连串的名字。 我正在使用更新button更新与特定名称相关联的最后一个报价,但点击更新button,它不更新。 我包括下面的代码server.js文件和外部js文件(main.js)。

main.js(外部js enter code here

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