Tengo una página de inicio de sesión que pide un nombre de usuario y una contraseña. Quiero compararlo con el almacenamiento local que agrega y almacena un objeto de datos de usuario (un objeto = nombre de usuario, nombre completo, contraseña, código postal, correo electrónico, móvil). Tengo esto hasta ahora que quiero probarlo y probarlo, pero sigo recibiendo ' undefined ' cuando hago que la consola imprima el nombre de usuario y la contraseña que el usuario ha ingresado en la pantalla de inicio de sesión. No puedo entender por qué?
Aquí está mi js:
const loginForm = document.querySelector(".login-form"); let usernameInput = document.getElementsByClassName(".lg-username").value; let passwordInput = document.getElementsByClassName(".lg-password").value; loginForm.addEventListener("submit", (e) => { e.preventDefault(); if (localStorage.getItem("UserData")) { const data = JSON.parse(localStorage.getItem('UserData')) if(usernameInput === data.username && passwordInput === data.password) { console.log("ye"); }else{ console.log("ne"); } }else{ console.log("not regis"); } console.log("not nice"); console.log(localStorage); console.log(usernameInput); console.log(passwordInput); }) <form class="login-form"> <ul> <li><input type="text" name="username" class="lg-username" placeholder="Username" required></li> <li><input type="password" name="password" class="lg-password" placeholder="Password" required></li> </ul> <input type="submit"> <div > </form>Primero, el nombre de la clase no es correcto .lg-username y .lg-password no existen, deberían ser .username y .password .
En segundo lugar, debe usar querySelector en lugar de getElementsByClassName para obtener el primer elemento que tiene la clase, pero getElementsByClassName obtiene una HTMLCollection
En tercer lugar, debe obtener el valor cuando envía, no cuando se carga el script.
const loginForm = document.querySelector(".login-form"); let username = document.querySelector(".username"); let password = document.querySelector(".password"); loginForm.addEventListener("submit", (e) => { e.preventDefault(); if (localStorage.getItem("UserData")) { const data = JSON.parse(localStorage.getItem('UserData')) if(username.value === data.username && password.value === data.password) { console.log("ye"); }else{ console.log("ne"); } }else{ console.log("not regis"); } console.log("not nice"); console.log(localStorage); console.log(username.value); console.log(password.value); }) <form class="login-form"> <ul> <li><input type="text" name="username" class="username" placeholder="Username" required></li> <li><input type="password" name="password" class="password" placeholder="Password" required></li> </ul> <input type="submit"> <div > </form>