He estado ejecutando el código de replit.com y estaría muy agradecido por cualquier ayuda. window.location.href = "veiw.html" es lo principal que no funciona, en lugar de llevar al usuario a la segunda página html, la página simplemente se recarga. Entonces, si hay alguna otra forma de llevar al usuario a la otra página o cualquier otra forma de resolver el problema, estoy dispuesto a intentar cualquier cosa.
//Login; verifaction// function verifaction() { var user = document.getElementById("uname").value; var pass = document.getElementById("psw").value; var setn = "Example" var setp = "13" var y = document.getElementById('show'); if(user === setn) { if(pass === setp) { window.location.href = "veiw.html" } else{alert("Incorrect Password")}} else{alert("Incorrect Username")} }; #login { display: block; padding-left: auto; padding-right: auto; padding-top: auto; padding-bottom: auto; font-family: 'Economica'; font-size: 20px; text-align: center; } <html> <body> <script src="script.js"></script> <br><br><br><br><br> <div clss="login"> <form> <label for="uname"><b>Username:</b></label> <input type="text" placeholder="Enter Username" name="uname" id="uname" required> <br><br> <label for="psw"><b>Password:</b></label> <input type="password" placeholder="Enter Password" name="psw" id="psw" required> <br><br> <button type="submit" id="log" onclick="verifaction()">Login</button> <label id="re"> <br><br> <input type="checkbox" name="remember">Remember me </label> </form> </div> </body> </html>El submit hace que el botón "Enviar" sea el formulario y, como no especificó ninguna URL en la etiqueta <form> , enviará una solicitud GET con los datos del formulario a la misma URL.
Lo que desea hacer es deshabilitar el comportamiento predeterminado del navegador y ejecutar el resto de su función "onClick":
Entonces en el HTML pasa el event
<button type="submit" id="log" onclick="verifaction(event)">Login</button>Y luego, lo desactivas:
function verifaction(event) { event.preventDefault() ... } O bien, también puede escuchar el evento de save que recibirá su formulario al hacer clic en el botón Guardar:
<form onsubmit="verifaction(event)"> <button type="submit" id="log">Login</button> </form>Ejemplo completo:
//Login; verifaction// function verifaction(event) { event.preventDefault() var user = document.getElementById("uname").value; var pass = document.getElementById("psw").value; var setn = "Example" var setp = "13" var y = document.getElementById('show'); if (user === setn) { if (pass === setp) { window.location.href = "veiw.html" } else { alert("Incorrect Password") } } else { alert("Incorrect Username") } }; #login { display: block; padding-left: auto; padding-right: auto; padding-top: auto; padding-bottom: auto; font-family: 'Economica'; font-size: 20px; text-align: center; } <html> <body> <script src="script.js"></script> <br><br><br><br><br> <div clss="login"> <form> <label for="uname"><b>Username:</b></label> <input type="text" placeholder="Enter Username" name="uname" id="uname" required> <br><br> <label for="psw"><b>Password:</b></label> <input type="password" placeholder="Enter Password" name="psw" id="psw" required> <br><br> <button type="submit" id="log" onclick="verifaction(event)">Login</button> <label id="re"> <br><br> <input type="checkbox" name="remember">Remember me </label> </form> </div> </body> </html>Lee mas:
Creo que lo estás haciendo como un ejercicio de aprendizaje; En proyectos reales, debe evitar validar los datos del lado del cliente (HTML+JS) que envía a sus usuarios.
Su problema principal es que el formulario se envía y la página se actualiza , porque no usó Event.prefentDefault() . Por lo tanto:
on* en elementos HTML. JS debe estar en un solo lugar y esa es su etiqueta o archivo respectivo<script> alrededor de su HTML de forma que bloquee la visualización. Los scripts (sin el atributo defer ) deben ir justo antes de la etiqueta de cierre </body> ."submit" .login(evt) y use el Evento como argumentoveiw.htmlview.htmlEjemplo:
<!DOCTYPE html> <html lang="en"> <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>Login</title> </head> <body> <div clss="login"> <form id="form-login"> <label for="uname"><b>Username:</b></label> <input type="text" placeholder="Enter Username" name="uname" id="uname" required> <br><br> <label for="psw"><b>Password:</b></label> <input type="password" placeholder="Enter Password" name="psw" id="psw" required> <br><br> <button type="submit">Login</button> <label><input type="checkbox" name="remember">Remember me</label> </form> </div> <!-- <script> or <script src="script.js"> --> <script> // DOM helpers: const EL = (sel, par) => (par || document).querySelector(sel); // Hardcoded password and username // so that anyone can hack the app: const setn = "Example"; const setp = "13"; // Task: // Login form handler const EL_form = EL("#form-login"); const EL_uname = EL("#uname"); const EL_passw = EL("#psw"); const login = (evt) => { evt.preventDefault(); // Prevent default browser action submit const user = EL_uname.value; const pass = EL_passw.value; const errors = []; if (user !== setn) errors.push("Incorrect Username"); if (pass !== setp) errors.push("Incorrect Password"); if (errors.length) return alert(errors.join("\n")); // If the function didn't return (exited) till now, we're fine! // Navigate to page: window.location.href = "view.html" }; EL_form.addEventListener("submit", login); </script> </body> </html>La página se está recargando porque está enviando el formulario y, dado que no tiene un atributo de action establecido, se establece de forma predeterminada en la página actual. Una vez que el formulario se envía, la página se actualiza y su JS no se ejecuta.
Lo que desea hacer es agregar un detector de eventos al formulario para submit un evento, evitar el comportamiento predeterminado del navegador y luego realizar su lógica en JS.
Al igual que:
// wait for DOMContentLoaded so you can find the form in DOM window.addEventListener("DOMContentLoaded", (event) => { document.querySelector("form").addEventListener("submit", (e) => { e.preventDefault(); // prevent default browser behaviour (submitting the form) verifaction(); // run whatever your logic is in this function }); }); También es mejor eliminar el detector de clics del botón, tener un detector de envío en el <form> es una mejor práctica, ya que se activará sin importar cómo se envió el formulario, no solo al hacer clic.