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" class="login-form-input" placeholder="Username"
required>
<input type="password" name="password" id="password-field" class="login-form-input" 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.
After making a snippet, we easier find the issue.
Firstly, you call multiple times the login form:
onsubmit in the <form><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" class="login-form-input" placeholder="Username"
required>
<input type="password" name="password" id="password-field" class="login-form-input" placeholder="Password"
required>
<button type="submit" onclick="LogIn()" id="login-submit">LogIn</button>
</form>
</main>
</body>
</html>