Esto es bastante simple, estoy tratando de hacer que el botón de inicio de sesión funcione y redirigir a un archivo diferente (placeholder.html) si lo que está en el correo electrónico y la contraseña coinciden con lo siguiente:
Inicio de sesión: Administrador Contraseña: Contraseña123
Todavía tengo que hacer que el botón de inicio de sesión funcione en primer lugar para redirigir, y me gustaría mantenerlo como un elemento de botón usando 'onlick =' con una función en js o una identificación por ahora.
Muchas gracias por la ayuda :) Disculpas si esto es un poco descuidado, una de mis primeras veces pidiendo ayuda aquí jaja
Esto es lo que tenía hasta ahora, que funciona completamente:
<!DOCTYPE html> <html> <head> <title>Login page</title> <link href="style." rel="stylesheet" type="text/css" /> <script src="script.js"></script> </head> <body> <div class="login-page"> <div name="login" class="form"> <div class="title login" style="font-size: 25px; font-family: Roboto; padding-bottom: 25px;"> Login Form </div> <form class="login-form" action="login.php" method="post"> <input type="email_" placeholder="email"/> <input type="password" placeholder="password"/> <button id="login_button">login</button> <p class="message" style="font-family: Roboto, sans-serif;">Not registered? <a href="register.html">Create an account</a> </p> </form> </div> </div> </body> <script type="text/javascript"> document.getElementById("login_button").onclick = function () { location.href = "#placeholder"; }; </script> </html>Bienvenido a StackOverflow, hay algunas cosas que quería cubrir aquí como parte de la respuesta.
La función se está ejecutando onClick, aunque la forma en que está usando location.href no es válida. Está redirigiendo a un ancla (comienza con un # ). La forma en que esto se implementa en los navegadores es que redirigirá su posicionamiento de desplazamiento a la parte superior del elemento con ID, si tenía un elemento en su página con la ID de placeholder de posición (y la altura de la página era superior al 100%) movería la posición de desplazamiento de la página, no redirigiría.
creo que estas buscando
location.href = "placeholder.html";Quería que el usuario fuera redirigido según el nombre de usuario y la contraseña que ingresan. Proporcionaré la solución a continuación, pero antes de eso, quería decir que esto no es seguro, el nombre de usuario y la contraseña están visibles dentro del código fuente y si planeó usar esto para ocultar información importante, no funcionará porque el código es visible para cualquiera que acceda a la página web, debe usar un lenguaje del lado del servidor como NodeJS o PHP para ocultar esa información, asumo que esto es solo aunque para practicar/aprender.
Lo primero que querrá hacer es obtener el nombre de usuario y la contraseña.
Tu <input type="email_" placeholder="email"/> debe ser <input type="text" placeholder="email"/> . Por alguna razón, puso el tipo como lo que parece ser un error tipográfico email_ y no email , pero como dijo que el nombre de usuario era admin , eso es solo text .
Comenzaría dando una identificación a los elementos de nombre de usuario y contraseña.
<input type="email" id="username" placeholder="email"/> <input type="password" id="password" placeholder="password"/>Luego, dentro de su función, puede cambiarla para verificar y redirigir como se muestra a continuación.
document.getElementById("login_button").onclick = function () { const username = document.getElementById("username").value const password = document.getElementById("password").value if (username === 'Admin' && password === 'Password123') { location.href = "placeholder.html"; } };Eso también distinguirá entre mayúsculas y minúsculas.
Hay un par de maneras en que podría hacer esto, aquí hay un ejemplo simple:
<!DOCTYPE html> <html> <head> <title>Login page</title> <link href="style." rel="stylesheet" type="text/css" /> <script src="script.js"></script> </head> <body> <div class="login-page"> <div name="login" class="form"> <div class="title login" style="font-size: 25px; font-family: Roboto; padding-bottom: 25px;"> Login Form </div> <form class="login-form" action="login.php" method="post"> <input type="email_" placeholder="email"/> <input type="password" placeholder="password"/> <button id="login_button" onclick="login()">login</button> <p class="message" style="font-family: Roboto, sans-serif;">Not registered? <a href="register.html">Create an account</a> </p> </form> </div> </div> </body> <script type="text/javascript"> function login() { // Login logic here if (loginSuccesful) { window.location.href = "/placeholder.html"; } } </script> </html>