JavaScript if-else condition always returns false-CodePudding

I am making a login page as my assignment using only HTML, CSS and JavaScript. The problem is that even after entering the correct id and password, condition returns false.

This is my code:

var loginForm = document.getElementById("login-form");
loginErrorMsg = document.getElementById("login-error-msg");
var UN = loginForm.username.value;
var PS = loginForm.password.value;
function LogIn() {
    if (UN === "user" && PS === "pass") {
        // location.reload();
        console.log("You have successfully logged in.");
    } else {
        console.log("Wrong password");
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="Login.css">
    <script defer src="Login.js"></script>
</head>

<body>
    <video playsinline autoplay muted loop poster="Background_Snap.png" id="bgvid">
        <source src="Background_Video.mp4" type="video/mp4">
    </video>
    <main id="main-holder">
        <h1 id="heading">Login</h1>

        <div id="login-error">
            <p id="login-error-msg">Invalid username <span id="login-error-msg-2">and/or password</span></p>
        </div>

        <form id="login-form" onsubmit="return false;">
            <input type="text" name="username" id="username-field"  placeholder="Username"
                required>
            <input type="password" name="password" id="password-field"  placeholder="Password"
                required>
            <button type="submit" onclick="LogIn()" id="login-submit">LogIn</button>
        </form>

    </main>
</body>

</html>

Please look into this and tell me where I am doing wrong. I have tried everything I could thing of.

CodePudding user response：

After making a snippet, we easier find the issue.

Firstly, you call multiple times the login form:

On the onsubmit in the <form>
With the <input> when clicking. In the snippet, I removed one.

Then, you load values only one time. It's confusing, only about "when the LogIn method is called". So, when we include everything in the method, it's fine.

Why put everything in it ? Because div can change, be removed or created. It's to prevent to use wrong values.

function LogIn() {
    var loginForm = document.getElementById("login-form");
    loginErrorMsg = document.getElementById("login-error-msg");
    var UN = loginForm.username.value;
    var PS = loginForm.password.value;
    if (UN === "user" && PS === "pass") {
        // location.reload();
        console.log("You have successfully logged in.");
    } else {
        console.log("Wrong password");
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="Login.css">
    <script defer src="Login.js"></script>
</head>

<body>
    <video playsinline autoplay muted loop poster="Background_Snap.png" id="bgvid">
        <source src="Background_Video.mp4" type="video/mp4">
    </video>
    <main id="main-holder">
        <h1 id="heading">Login</h1>

        <div id="login-error">
            <p id="login-error-msg">Invalid username <span id="login-error-msg-2">and/or password</span></p>
        </div>

        <form id="login-form" onsubmit="return false;">
            <input type="text" name="username" id="username-field"  placeholder="Username"
                required>
            <input type="password" name="password" id="password-field"  placeholder="Password"
                required>
            <button type="submit" onclick="LogIn()" id="login-submit">LogIn</button>
        </form>

    </main>
</body>

</html>

CodePudding user response：

If you focus on this part:

var UN = loginForm.username.value;
var PS = loginForm.password.value;

You'll see that you are getting the value of your inputs, ie. what the user types in.

However, your code is checking for hard-coded values:

function LogIn() {
    if (UN === "user" && PS === "pass") {

Thus, unless you type "user" in your username and type "pass" in your password field, your code won't work.