登录屏幕的 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 value="Password"

id="password value="Password"

我建议您使用一些带有语法荧光笔的编辑器，并且更好地维护文档和代码的结构。另外，您可以尝试 w3c 标记验证器。

所有这些都将帮助您避免此类错误。

Answer 2

id您的 HTML 代码中有一个错误，您忘记了字段属性末尾的“ password。按如下所示修复：

<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" />