登录屏幕的 document.getElementById 为 null

Question

我最近开始学习 Javascript，我正在尝试创建一个登录系统原型。目的是用户输入所需的详细信息（用户名是“Mike”，密码是“password”），然后重定向到新网页。但是，不会发生重定向。这是由于我收到 document.getElementById(...) is null 错误。

我发现的大多数答案都说在执行 javascript 时文档尚未完全加载。但是，由于代码在按下按钮之前不会执行，我相信这不是这个问题。

我的 HTML 代码是：

<form id="form_id" method="post">

     <input type="text" name="username" id="username" value="Username" class="login_textbox"/><br><br>

     <input type="text" name="password" id="password" value="Password" class="login_textbox"/><br>

     <br><input type="button" value="Login" id="submit" onclick="validate()" class="login_button" /> 

  </form>

我的 JavaScript 代码是：

function validate(){

var username = document.getElementById("username").value;

    var password = document.getElementById("password").value;

    if ( username == "Mike" && password == "password"){

       alert ("Login Successful");

       window.location = "Pages/homepage.htm";

       return false;

       }

}

Answer 1

您在 ID 密码字段中缺少结束引号。id="password&nbsp;value="Password"id="password&nbsp;value="Password"我建议您使用一些带有语法荧光笔的编辑器，并且更好地维护文档和代码的结构。另外，您可以尝试 w3c 标记验证器。所有这些都将帮助您避免此类错误。

Answer 2

id您的 HTML 代码中有一个错误，您忘记了字段属性末尾的“ password。按如下所示修复：<form id="form_id" method="post">&nbsp;<input type="text" name="username" id="username" value="Username" class="login_textbox"/><br><br>&nbsp;<input type="text" name="password" id="password" value="Password" class="login_textbox"/><br>&nbsp;<br><input type="button" value="Login" id="submit" onclick="validate()" class="login_button" />&nbsp;