小开

最佳答案

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

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

小开

感谢@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;
};
}

小开

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

我找到的解决方案是将我的函数包装在整个文档的事件侦听器中，以检查DOM何时完成加载。

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

我想这是因为我使用的框架(Angular)正在动态地改变我的HTML类和ID。

小开

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

小开

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

但我不喜欢重新排列内容的解决方案。

首选的解决方案是在页面onload事件上放置一个事件处理程序，并在那里设置监听器。这将确保在执行赋值之前加载页面和目标元素。如

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


<body onload="onLoadFunct()" ....>
.....

小开

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

小开

我有一组引语和人名。我使用更新按钮更新与特定名称相关联的最后引用，但单击更新按钮它不更新。我包括下面的代码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);
})


})

小开

这是因为在执行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(){}

小开

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

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

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

小开

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

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

小开

脚本在主体之前加载，在主体之后保留脚本

小开

我遇到了同样的问题，并检查null，但它没有帮助。因为脚本是在页面加载之前加载的。因此，只需将脚本放在结束体标记之前就可以解决问题。

小开

把脚本放在正文标签的末尾。

<html>
<body>
.........
<script src="main.js"></script>
</body>
</html>

小开

我也有同样的问题，但我的本我是存在的。所以我试着加上“window”。Onload = init;"然后我用init函数包装了我的原始JS代码(你想叫它什么都行)。这是有效的，所以至少在我的情况下，我在加载文档之前添加了一个事件侦听器。这也可能是你正在经历的。

小开

如果你的js代码是外部文件，使用这种方法:

<script src="filename.js" defer></script>

如果您的代码是内部文件，则使用DOMContentLoaded

以上两种方法将确保DOM在执行js代码之前完全加载!

小开

这个问题已经有答案了，但是对于这些简单的条件，我喜欢使用逻辑AND (&&)运算符:

var el = document.getElementById('overlayBtn');


el && el.addEventListener('click', swapper, false);

在我看来更易于阅读和简洁。

小开

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

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

<script async src="script.js"></script>

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

我更喜欢第二种选择。阅读有关async和defer 在这里的更多信息

小开

您可以将属性defer添加到脚本标记中。您看到这个错误的原因是因为脚本在DOM加载之前运行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/styles.css">
<script src="scripts/main.js" defer="defer"></script>
</head>

Defer是一个布尔值，表示一旦解析完DOM就运行脚本

小开

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

小开

当我试图通过Id获取一个类的元素时，我遇到了这个问题。检查并确认通过正确的属性(例如id或class)获取元素。否则就会出现这个错误

小开

当“;”元素不存在于dom中时，也会发生此错误。或者当id或classname不存在，但你在脚本文件中请求它时。因此，您调用的事件为空。

小开

我认为最简单的方法是加一个'?el前的问号:

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

小开

这是因为，人们习惯在head中定义他们的javascript文件，所以当你在html标签中做一些事情时，你的javscript文件是executed，而不是你的html文件，所以返回值是NULL。

解决方案: Define your Javascript file at the end of your bodytag ';

小开

我认为最简单的方法是使用defer。不知道为什么没人发这个答案

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="style.js" defer></script>
</head>

小开

使用可选的链接操作符(?.)将在元素不存在的页面上返回undefined，而不是抛出错误。例子;

el?.addEventListener('click', swapper, false);

无法读取属性'的空

Main.js(外部js)

server.js文件