无法读取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); }) })
