Javascript 未捕获的类型错误：无法读取属性“addEventListener”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28965395/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'addEventListener'
提问by kobart
I have no idea why this does not work. I've seen similar problems on so but they don't fix the problem
我不知道为什么这不起作用。我见过类似的问题，但他们没有解决问题
That's the HTML code
这是 HTML 代码
<html>
<head>
<meta charset="utf-8" />
<title>Java Script 2</title>
</head>
<body>
<div id="loginForm">
<form name="userLogin">
<input type="text" name="userName" />
<input type="password" name="userPass" />
<input type="button" name="login" value="Login" />
</div>
<script src = "question_2.js"></script>
</form>
</div>
</body>
</html>
and this is the JavaScript
这是 JavaScript
var submit = document.getElementById("login");
if(submit!="null"){
submit.addEventListener("click",getLogin);
}
function getLogin(){
var nameData = "admin";
var passData = "admin";
var userName = document.userLogin.userName.value;
var pass = document.userLogin.userPass.value;
if(userName.compareTo(nameData) && pass.compareTo(passData)){
replace.textContent("Hello there " + nameData);
}
else{
document.write("Try again");
}
}
I have to make the page remove the sign in from when it matches the set login and password to remove the form and display a welcome message. When i open the page and go into the console I get the following error
我必须让页面在它与设置的登录名和密码匹配时删除登录才能删除表单并显示欢迎消息。当我打开页面并进入控制台时，出现以下错误
Uncaught TypeError: Cannot read property 'addEventListener' of nullquestion_2.js:4 (anonymous function)
未捕获的类型错误：无法读取 nullquestion_2.js:4 的属性“addEventListener”（匿名函数）
It targets the action listener I have set for the button but I have no idea how to fix this.
它针对我为按钮设置的动作侦听器，但我不知道如何解决这个问题。
回答by Mathias Vonende
Well, you have no Element with the id:"login". Thats why submit is null.
好吧，您没有带有 id:"login" 的元素。这就是为什么提交是空的。
You should give the input:
你应该给出输入：
<input type="button" name="login" value="Login" />
the appropriate id. And, another thing:
适当的标识。而且，另一件事：
if(submit!="null")
I assume you want to check "submit" against the actual value: null, not the string "null". You should write your if-statement it as follows:
我假设您想根据实际值检查“提交”：null，而不是字符串“null”。你应该写你的 if 语句如下：
if(submit!==null)
This way, you check submit against the null-Object, and you do it type-safe, that means if sumbit is not null, but for some strange reason undefined, you will still do the correct check. Read Steve Johnsons Blog Poston undefined vs. null, if this is somehow new to you.
通过这种方式，您可以针对空对象检查提交，并且是类型安全的，这意味着如果 sumbit 不为空，但由于某些奇怪的原因未定义，您仍然会进行正确的检查。阅读Steve Johnson 的关于 undefined 与 null 的博客文章，如果这对您来说是新的。
回答by kobart
You have no element with ID "login"
您没有 ID 为“登录”的元素
var submit = document.getElementById("login");
if(submit){
submit.addEventListener("click",getLogin);
}
回答by Danang
just simply add defer to your script src at .html like
只需简单地将 defer 添加到 .html 中的脚本 src 中
<script src="slide 52.js" defer></script>
<script src="slide 52.js" defer></script>
回答by Adépòjù Olúwáségun
From your HTML code above, you did not define the ID you making reference to.
you made reference to ID (login) on this line var submit = document.getElementById("login");
从上面的 HTML 代码中，您没有定义引用的 ID。您login在此行中引用了 ID ( )var submit = document.getElementById("login");
While the only Idyou had in the HTMLwas "loginform".
you can correct that line or simply add the "login"Id to the desired HTMLattribute and it will surely work as desired.
虽然只有Id你在HTML是"loginform". 您可以更正该行或简单地将"login"Id添加到所需的HTML属性，它肯定会按需要工作。
