[document.getElementById对于登录屏幕为空

Question

我最近开始学习javascript，我正在尝试创建一个登录系统原型。目的是用户输入所需的详细信息（用户名为“ Mike”，密码为“ password”），然后将其重定向到新的网页。但是，没有重定向发生。这是由于我收到document.getElementById（...）为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

您的HTML代码中有错误，您忘记了id字段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" /> 

Answer 2

您在ID密码字段中缺少引号。

id="password value="Password"

id="password value="Password"

我建议您使用一些带有语法突出显示功能的编辑器，并更好地维护文档和代码的结构。另外，您可以尝试使用w3c标记验证程序。

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