Estoy empezando con esto de HTML y JavaScript, y practicando se me ocurrió hacer una página para loguearme con usuario y contraseña. Cuando ingreso el usuario, funciona perfecto: lee el usuario que se escribe y lo guarda en una variable, luego lo compara con el nombre de usuario guardado en otra variable y si coinciden, se sigue al paso de colocar la contraseña. Pero cuando escribo la contraseña, NO lee la contraseña que el usuario escribe y no la guarda en la variable. Entonces el programa falla. Adjunto el código HTML y JS: HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iniciar Sesión</title>
<script src="loginDeUsuarioRefactor.js"></script>
</head>
<body>
<h1 id="titulo">Prueba de login</h1>
<section id="login">
<h2 id="iniciar-sesion">Iniciar sesión</h2>
</section>
<section id="nombre-de-usuario">
<input type="text" name="userName" id="usuario" placeholder="e-mail o nombre de usuario"/>
<p>______________________________</p>
<p>¿No tenés cuenta?
<a href="file:///D:/Documentos/Proyectos%20Web/Mis%20proyectos%20web/Register%20y%20Login/registrarse.html">Creá una cuenta acá</a> </p>
</section>
<section id="contraseña">
<h2 id="escribir-contraseña">Escribir contraseña</h2>
<input type="password" name="userPassword" id="password" placeholder="Contraseña"/>
</section>
<section id="boton-siguiente">
<button id="siguiente">Siguiente</button>
</section>
<br>
<section id="boton-iniciar-sesion">
<button id="iniciar-sesion">Iniciar sesión</button>
</section>
</body>
</html>
JavaScript:
let usuario
let contraseña
let usuarioRegistrado = "usuariodeprueba@hotmail.com"
let contraseñaRegistrada ="probando1234"
//Primero lee todo el HTML y luego ejecuta la función iniciarTesteo
window.addEventListener("load", iniciar)
function iniciar() {
//Ocultar texto que dice "Escribir contraseña"
let sectionPass = document.getElementById("contraseña")
sectionPass.style.display = "none"
//Ocultar botón "iniciar Sesión" que aparece al escribir la contraseña
let sectionIniciarSesion = document.getElementById("boton-iniciar-sesion")
sectionIniciarSesion.style.display = "none"
let botonSiguiente = document.getElementById("siguiente")
botonSiguiente.addEventListener("click", chequearUsuarioYContraseña)
}
function chequearUsuarioYContraseña() {
chequearUsuario()
let botonIniciarSesion = document.getElementById("iniciar-sesion")
botonIniciarSesion.addEventListener("click", verificarPassword)
}
function chequearUsuario() {
usuario = document.getElementById("usuario").value
let sectionLogin = document.getElementById("login")
let sectionNombreDeUsuario = document.getElementById("nombre-de-usuario")
let sectionPass = document.getElementById("contraseña")
let sectionBotonSiguiente = document.getElementById("boton-siguiente")
let sectionIniciarSesion = document.getElementById("boton-iniciar-sesion")
if(usuario === usuarioRegistrado) {
sectionLogin.style.display = "none"
sectionNombreDeUsuario.style.display = "none"
sectionBotonSiguiente.style.display = "none"
sectionPass.style.display = "block"
sectionIniciarSesion.style.display = "block"
}
else {
alert("El nombre de usuario no existe")
}
}
function verificarPassword() {
verificacion()
}
function verificacion() {
contraseña = document.getElementById("password").value
if(contraseña === contraseñaRegistrada) {
window.open("file:///D:/Documentos/Proyectos%20Web/Mis%20proyectos%20web/Register%20y%20Login%20-%20refactor/registrarse-refactor.html")
}
else {
alert("Contraseña incorrecta!")
}
}