无法弄清楚什么是错我的JavaScript代码

Question

这是HTML代码：

<form action=""> 
      <div data-role="fieldcontain"> 
       <label for="username"> 
        Username 
       </label> 
       <input class="usernamevalidation validate" name="username" id="username" placeholder="" value="" type="text" maxlength="20" required> 
      </div> 
      <div data-role="fieldcontain"> 
       <label for="password"> 
        Password 
       </label> 
       <input class="validate" name="password" id="password" placeholder="" value="" type="password" maxlength="20" required> 
      </div> 
      <input id="submitLogin" type="submit" value="Log In" data-transition="slide"> 
      <div id="errormsg"></div> 
     </form> 

这是JavaScript代码。当用户名和密码是“abc”时，我试图对页面进行硬编码登录。

username_test = document.getElementById("username").getAttribute("value") === "abc"; 
    password_test = document.getElementById("password").getAttribute("value") === "abc"; 
    if_true = window.location.href("Main_Menu.html"); 
    if_false = document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>"); 
    function login() { 
     if (username_test && password_test) 
      { 
      if_true 
      } 
     else 
      { 
      if_false 
      } 
    } 

Answer 1

试试这个：

username_test = document.getElementById("username").getAttribute("value") === "abc"; 
password_test = document.getElementById("password").getAttribute("value") === "abc"; 
function login() { 
    if (username_test && password_test) 
     { 
      window.location.href = "Main_Menu.html"; 
     } 
    else 
     { 
      document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>"); 
     } 
} 

OR

username_test = document.getElementById("username").getAttribute("value") === "abc"; 
password_test = document.getElementById("password").getAttribute("value") === "abc"; 
if_true = function() { window.location.href = "Main_Menu.html"; }; 
if_false = function() { document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>"); }; 
function login() { 
    if (username_test && password_test) 
     { 
      if_true(); 
     } 
    else 
     { 
      if_false(); 
     } 
} 

Answer 2

有在你的代码的两个错误。

首先：

if_true = window.location.href("Main_Menu.html"); 

window.location.href不是功能。将它放入if语句中，因为它会立即执行。你不能将它存储在某个变量中。我的意思是你可以，但它仍然会在你称之为的行中执行。

二：

if_false = document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>"); 

innerHTML也不是一个功能。它是#errormsg元素的属性。而且你不能只将函数结果绑定到一个变量，并将其输出到其他地方，并期望它会在那里被调用。

您的代码应该是这样的：

username_test = document.getElementById("username").getAttribute("value") === "abc"; 
password_test = document.getElementById("password").getAttribute("value") === "abc"; 

function login() { 
    if (username_test && password_test) 
    { 
     window.location.href = "Main_Menu.html"; 
    } 
    else 
    { 
     document.getElementById("errormsg").innerHTML = "<p style="color=red;">Invalid credentials.</p>"; 
    } 
} 

Answer 3

我看到很多问题，您的代码在这里

• 你让空动作的形式，和一个提交按钮。此按钮将提交空行为，因此无需执行任何操作即可重新加载页面。
• 即使在写下任何内容之前，您都正在读取页面开头的用户名和密码，因此它总是会导致错误。
• 函数login未分配给任何按钮操作。

你可以做到这一点 -

<form action=""> 
      <div data-role="fieldcontain"> 
       <label for="username"> 
        Username 
       </label> 
       <input class="usernamevalidation validate" name="username" id="username" placeholder="" value="" type="text" maxlength="20" required> 
      </div> 
      <div data-role="fieldcontain"> 
       <label for="password"> 
        Password 
       </label> 
       <input class="validate" name="password" id="password" placeholder="" value="" type="password" maxlength="20" required> 
      </div> 
      <input id="submitLogin" onclick="login()" value="Log In" data-transition="slide"> 
      <div id="errormsg"></div> 
     </form> 

JS：

function login() { 
    username_test = document.getElementById("username").getAttribute("value") === "abc"; 
    password_test = document.getElementById("password").getAttribute("value") === "abc"; 
    if (username_test && password_test) 
     { 
      window.location.href = "Main_Menu.html"; 
     } 
    else 
     { 
      document.getElementById("errormsg").innerHTML("<p style="color=red;">Invalid credentials.</p>"); 
     } 
} 

Answer 4

试试这个：

<form action=""> 
<div data-role="fieldcontain"> 
<label for="username"> 
Username 
</label> 
<input class="usernamevalidation validate" name="username" id="username" placeholder="" value="" type="text" maxlength="20" required> 
</div> 
<div data-role="fieldcontain"> 
<label for="password"> 
Password 
</label> 
<input class="validate" name="password" id="password" placeholder="" value=""type="password" maxlength="20" required> 
</div> 
<input id="submitLogin" type="submit" value="Log In" data-transition="slide" onclick="nextpage()"> 
<div id="errormsg"></div> 
</form> 

This is script code: 

function nextpage() 
{ 
username_test = document.getElementById("username").value 
password_test = document.getElementById("password").value 
if((username_test=="abc")&&(password_test=="abc")) 
window.location.href("Main_Menu.html"); 
    else 
document.getElementById("errormsg").innerHTML="Invalid credentials."; 
}