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