Estoy creando una página de inicio de sesión como mi tarea usando solo HTML, CSS y JavaScript. El problema es que incluso después de ingresar la identificación y la contraseña correctas, la condición devuelve falso.
Este es mi código:
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>Por favor, mire esto y dígame dónde estoy haciendo mal. He intentado todo lo que pude pensar.
Después de crear un fragmento, es más fácil encontrar el problema.
En primer lugar, llama varias veces al formulario de inicio de sesión:
onsubmit en el <form><input> al hacer clic. En el fragmento, eliminé uno.Luego, carga valores solo una vez. Es confuso, solo sobre "cuando se llama al método LogIn". Entonces, cuando incluimos todo en el método, está bien.
¿Por qué poner todo en él? Porque div puede cambiar, eliminarse o crearse. Es para evitar el uso de valores incorrectos.
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>