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

无法弄清楚我的JavaScript代码有什么问题

4 个答案: