未捕获的类型错误：无法读取属性“addEventListener”答案

【问题标题】：Uncaught TypeError: Cannot read property 'addEventListener'未捕获的类型错误：无法读取属性“addEventListener”
【发布时间】：2015-05-11 23:45:22
【问题描述】：

我不知道为什么这不起作用。我在so上看到过类似的问题，但他们没有解决问题

这是 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>

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

当页面与设置的登录名和密码匹配时，我必须使页面从登录中删除，以删除表单并显示欢迎消息。当我打开页面并进入控制台时，出现以下错误

未捕获的类型错误：无法读取属性“addEventListener” nullquestion_2.js:4（匿名函数）

它针对的是我为按钮设置的动作监听器，但我不知道如何解决这个问题。

【问题讨论】：

您的 HTML 中没有 ID 为“login”的元素，因此.getElementById() 返回null。
getElementById() 查找与id attribute 匹配的元素，而不是name。

标签： javascript html typeerror

【解决方案1】：

您没有 ID 为“login”的元素

var submit = document.getElementById("login");

if(submit){
submit.addEventListener("click",getLogin);
}

【讨论】：

【解决方案2】：

好吧，您没有 id 为“login”的元素。这就是为什么提交为空。

你应该给出输入：

<input type="button" name="login" value="Login" />

适当的 id。还有一件事：

if(submit!="null")

我假设您想根据实际值检查“提交”：null，而不是字符串“null”。你应该把你的 if 语句写成如下：

if(submit!==null)

通过这种方式，您可以根据 null-Object 检查提交，并且执行类型安全，这意味着如果 sumbit 不为 null，但由于某些奇怪的原因未定义，您仍然会进行正确的检查。阅读 Steve Johnsons Blog Post on undefined vs. null，如果这对您来说有点陌生。

【讨论】：

【解决方案3】：

只需将 defer 添加到您的脚本 src 中的 .html 即可

<script src="slide 52.js" defer></script>

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。

【解决方案4】：

从上面的 HTML 代码中，您没有定义您引用的 ID。你在这一行引用了 ID (login) var submit = document.getElementById("login");

虽然您在HTML 中拥有的唯一Id 是"loginform"。您可以更正该行或简单地将 "login" Id 添加到所需的 HTML 属性中，它肯定会按需要工作。

【讨论】：