He estado tratando de crear una página de inicio de sesión de javascript simple que me redirige a un archivo diferente si el nombre de usuario y la contraseña coinciden.
Para simplificar, hice el nombre de usuario correcto = "a" y la contraseña correspondiente correcta = "b".
<form> <input class="user-pass" name="username" type="text" id="username" placeholder="Username"> <br> <br> <input class="user-pass" name="password" type="password" id="password" placeholder="Password"> <br> <br> <button class="user-pass" type="submit" id="login" style="background-color: rgb(81, 122, 199); color: white; font-weight: bold;" onsubmit="login()">Log In</button> </form> <script> function login(){ const username = document.getElementById("username") const password = document.getElementById("password") const message = document.getElementById("hidden") if (username.value === "a" && password.value === "b"){ window.location.href="google.com"; } }; </script>¿Alguien puede decirme qué estoy haciendo mal? Soy nuevo en esto asi que agradeceria cualquier ayuda!
Debe estudiar acerca de los formularios , los usamos para recopilar datos y enviarlos a un servidor.
Su formulario no tiene un método de action y no sabe qué hacer con los datos que contiene, por lo que lo devuelve a la página original.
Puede lograr la funcionalidad que desea simplemente eliminando las etiquetas de formulario y llamando a su función desde un evento onclick en lugar de onsubmit
<input class="user-pass" name="username" type="text" id="username" placeholder="Username"> <br> <br> <input class="user-pass" name="password" type="password" id="password" placeholder="Password"> <br> <br> <button class="user-pass" id="login" style="background-color: rgb(81, 122, 199); color: white; font-weight: bold;" onclick="login()">Log In</button> <script> function login(){ const username = document.getElementById("username") const password = document.getElementById("password") const message = document.getElementById("hidden") if (username.value === "a" && password.value === "b"){ window.location.href="https://www.google.com"; } console.log(username.value) }; </script>