简体   繁体   English

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

[英]HTML Javascript redirecting user with if statement does not work

I want to use user input to decide whether or not the user is redirected to another page.我想使用用户输入来决定用户是否被重定向到另一个页面。 In this case, the user inputs a username and password.在这种情况下,用户输入用户名和密码。 If the username and password is correct, then the user is redirected.如果用户名和密码正确,则重定向用户。 For this, I use simple javascript and html:为此,我使用简单的 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>

However, when I fill in the correct username and password, in this case '123', I don't get redirected at all.但是,当我填写正确的用户名和密码时,在本例中为“123”,我根本不会被重定向。 Nothing happens.什么都没发生。

But, when I don't use an if statement at all:但是,当我根本不使用 if 语句时:

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

it works correctly.它工作正常。 That is, whenever you press the submit button, you get redirected.也就是说,每当您按下提交按钮时,您都会被重定向。 However, in this case the user does not have to fill in credentials at all, so in my case this is not of much use.但是,在这种情况下,用户根本不需要填写凭据,所以在我的情况下,这并没有多大用处。

I have tried window.location , location.assign , location.href , location.replace and variants, but all yield the same result.我尝试过window.locationlocation.assignlocation.hreflocation.replace和变体,但都产生了相同的结果。

How can I solve or work around this?我该如何解决或解决这个问题?

this.form is wrong. this.form是错误的。 also, you might consider using the onsubmit event:另外,您可以考虑使用 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM