我必须为项目使用vanilla JavaScript。我有一些功能，其中一个是打开菜单的按钮。它适用于目标ID存在的页面，但会导致id不存在的页面出错。在那些函数找不到id的页面上，我收到一个“无法读取属性'addEventListener'的null”错误，我的其他函数都没有工作。
下面是打开菜单的按钮的代码。
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是否为null：
var el = document.getElementById('overlayBtn');
if(el){
el.addEventListener('click', swapper, false);
}
这是因为在执行bundle js时尚未加载元素。
我将<script src="sample.js" type="text/javascript"></script>移动到index.html文件的最底部。这样，您可以确保在解析和呈现所有html元素之后执行脚本。
在窗口加载时添加所有事件侦听器。无论您在哪里放置脚本标记，都会像魅力一样。
window.addEventListener("load", startup);
function startup() {
document.getElementById("el").addEventListener("click", myFunc);
document.getElementById("el2").addEventListener("input", myFunc);
}
myFunc(){}
似乎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>");
}
我遇到了类似的情况。这可能是因为脚本在页面加载之前执行。通过将脚本放在页面底部，我避开了问题。
我得到了同样的错误，但执行空检查似乎没有帮助。
我找到的解决方案是将我的函数包装在整个文档的事件监听器中，以检查DOM何时完成加载。
document.addEventListener('DOMContentLoaded', function () {
el.addEventListener('click', swapper, false);
});
我认为这是因为我使用的是一个动态改变我的HTML类和ID的框架（Angular）。
感谢@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;
};
}
我只是将'async'添加到我的脚本标记中，这似乎解决了这个问题。我不知道为什么，如果有人可以解释，但它对我有用。我的猜测是该页面没有等待加载脚本，因此页面与JavaScript同时加载。
Async / Await使我们能够以同步方式编写异步代码。它只是使用生成器和yield语句来“暂停”执行的语法糖，使我们能够将它分配给变量！
这里是参考链接 - https://medium.com/siliconwat/how-javascript-async-await-works-3cab4b7d21da
它只是bcz你的JS在HTML部分之前被加载，所以它找不到那个元素。只需将整个JS代码放在一个函数中，该函数将在窗口加载时调用。
您也可以将您的Javascript代码放在html下面。
正如其他人所说的那样，问题是在加载页面（特别是目标元素）之前执行脚本。
但我不喜欢重新排序内容的解决方案。
首选解决方案是在页面onload事件上放置一个事件处理程序，并在其中设置Listener。这将确保在执行赋值之前加载页面和目标元素。例如
<script>
function onLoadFunct(){
// set Listener here, also using suggested test for null
}
....
</script>
<body onload="onLoadFunct()" ....>
.....
我有一系列引号和名字。我正在使用更新按钮来更新与特定名称关联的最后一个引用，但是在单击更新按钮时它不会更新。我在下面包含了server.js文件和外部js文件（main.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);
})
})
}
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);
})
})