無法弄清楚什麼是錯我的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."; 
}