Question

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

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

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

未捕获的TypeError：无法读取属性'addEventListener' nullquestion_2.js：4（匿名函数）

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

Answer 1

嗯，你没有带有id的元素：＆＃34;登录＆＃34;。这就是为什么提交为空。

你应该给出输入：

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

适当的身份证明。还有一件事：

if(submit!="null")

我假设您要检查＆＃34;提交＆＃34;对实际值：null，而不是字符串＆＃34; null＆＃34;。您应该按如下方式编写if语句：

if(submit!==null)

这样，你检查对null-object的提交，你做类型安全，这意味着如果sumbit不为null，但由于某些奇怪的原因未定义，你仍然会做正确的检查。如果这对您来说是新的，请阅读undefined与null的Steve Johnsons Blog Post。

Answer 2

您没有带ID和＃34;登录＆＃34;

的元素

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

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

Answer 3

只需添加延迟到.html的脚本src，如

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

Answer 4

从上面的HTML代码中，您没有定义要引用的ID。您在此行login

上引用了ID（var submit = document.getElementById("login");）

您在Id中仅有的HTML是"loginform"。您可以更正该行，或仅将"login" ID添加到所需的HTML属性中，它肯定会按需运行。

未捕获的TypeError：无法读取属性'addEventListener'

4 个答案: