使用 if 语句重定向用户的 HTML Javascript 不起作用答案

【问题标题】：HTML Javascript redirecting user with if statement does not work使用 if 语句重定向用户的 HTML Javascript 不起作用
【发布时间】：2022-06-22 23:15:31
【问题描述】：

我想使用用户输入来决定是否将用户重定向到另一个页面。在这种情况下，用户输入用户名和密码。如果用户名和密码正确，则重定向用户。为此，我使用简单的 javascript 和 html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1">
        <title>Login</title>
        <!-- the form awesome library is used to add icons to our form -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"> -->
        <!-- include the stylesheet file -->
        <link href="login.css" rel="stylesheet" type="text/css"> 

        <script>
            function testResults (form) {
            var given_username = form.username.value;
            var given_password = form.password.value;

            var correct_username = "123";
            var correct_password = "123";

            if (given_username == correct_username && given_password == correct_password) {
                    window.location.assign("redirected.html");
            }

            else {
                alert("Wrong username and/or password.")
            }
        }
        </script>

    </head>
    <body>
        <div class="login">
            <h1>Login</h1>
            <form action="" method="get">
                <label for="username">
                    <!-- font awesome icon -->
                    <i class="fas fa-user"></i>
                </label>
                <input type="text" name="username" placeholder="Username" id="username" required>
                <label for="password">
                    <i class="fas fa-lock"></i>
                </label>
                <input type="password" name="password" placeholder="Password" id="password" required>
                <input type="submit" value="Login" onclick="testResults(this.form)" />
            </form>
        </div>
    </body>
</html>

但是，当我填写正确的用户名和密码（在本例中为“123”）时，我根本不会被重定向。什么都没有发生。

但是，当我根本不使用 if 语句时：

        <script>
            function testResults (form) {
             window.location.assign("redirected.html");
        }
        </script>

它工作正常。也就是说，每当您按下提交按钮时，您都会被重定向。但是，在这种情况下，用户根本不需要填写凭据，所以在我的情况下，这并没有多大用处。

我尝试过window.location、location.assign、location.href、location.replace 和变体，但都产生了相同的结果。

我该如何解决或解决这个问题？

【问题讨论】：

标签： javascript html forms if-statement redirect

【解决方案1】：

this.form 是错误的。另外，您可以考虑使用 onsubmit 事件：

<form action="" method="get" onsubmit="testResults(this); return false">
    <label for="username">
        <!-- font awesome icon -->
        <i class="fas fa-user"></i>
    </label>
    <input type="text" name="username" placeholder="Username" id="username" required>
    <label for="password">
        <i class="fas fa-lock"></i>
    </label>
    <input type="password" name="password" placeholder="Password" id="password" required>
    <input type="submit" value="Login" />
</form>

【讨论】：