Question

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

2015-03-10

25808

javascript html typeerror

我不知道为什么这不起作用。我见过类似的问题，但它们没有解决问题

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

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

Uncaught TypeError: Cannot read property 'addEventListener' of nullquestion_2.js:4 (anonymous function)

它针对我为按钮设置的操作侦听器，但我不知道如何修复它。

Answer 1

好吧，您没有 id 为“login”的元素。这就是 submit 为 null 的原因。

您应该输入：

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

适当的 id。还有一件事：

if(submit!="null")

我假设您想根据实际值检查“submit”：null，而不是字符串“null”。您应该按如下方式编写 if 语句：

if(submit!==null)

这样，您可以根据 null 对象检查 submit，并且您执行的是类型安全的，这意味着如果 sumbit 不为 null，但由于某种奇怪的原因未定义，您仍将执行正确的检查。如果您对此还不熟悉，请阅读 Steve Johnsons 博客文章中的 undefined 与 null。

Answer 2

您没有 ID 为“login”的元素

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

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

Answer 3

只需简单地将 defer 添加到 .html 的脚本 src 中，如

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

Danang

2018-03-11