無法弄清楚我的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>");
        }
}

要么

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.";
}