Estoy aprendiendo HTML y estoy tratando de hacer algunas cosas muy básicas. Tengo mi página principal en index.html, un formulario de registro en registration.html y un script en script.js.
Index.html tiene el siguiente botón: <BUTTON id="login" onclick="register()">login/registration</BUTTON>
function register() { if (!loggedIn) document.location.href = "registration.html"; else { // Page not created yet //document.location.href = "aacount.html"; console.log("redirecting to account page"); } En script.js, en la parte superior, he let loggedIn = false; .
El botón de envío del formulario tiene este aspecto: <button type="submit" class="submit" onclick="submit()"><b>Submit</b></button>
function submit(){loggedIn = true;}Ahora en mi página principal, tengo el botón de inicio de sesión. Me gustaría que cambiara a un botón de Cuenta, así que hice esto:
function checkLog() { if (loggedIn == true) document.getElementById("login").textContent = "Account"; else document.getElementById("login").textContent = "Login/Registration"; } Quiero mi formulario, que tiene el form class="registration_form" action="index.html" method="post" id="form" para redirigir a la página principal una vez que haga clic en enviar. Como ya inició sesión, quiero que el inicio de login/registration cambie a un botón de account . No tengo ningún backend porque aún no he aprendido cómo. Solo quiero modificar index.html una vez que se vuelva a cargar usando la función checkLog() . ¿Hay alguna manera de hacer esto usando solo HTML/JavaScript? He visto un par de soluciones que usan PHP, pero solo las utilizaré la próxima semana cuando tenga más tiempo libre. Hasta entonces, ¿puedo hacer que funcione de esta manera?
Solo para estar seguro, he intentado agregar onload="checkLog()" tanto al texto del cuerpo completo como al botón de inicio de sesión sin éxito. También descubrí que agregar onclick="checkLog()" en el botón Enviar en el formulario no hace nada, ya que se ejecuta antes de que ocurra la acción de cambiar las páginas web. Básicamente quiero un onclick="" que ocurra después de la acción.
Como se sugirió mucho en los comentarios, dado que su proyecto no tiene un lado del servidor, pero está tratando de verificar si el usuario ha iniciado sesión en su sitio web, su mejor opción son las cookies o LocalStorage . En esta respuesta, adoptaré el enfoque LocalStorage .
function register() { if (localStorage.getItem("userAuthentication") === null) storage.setItem("userAuthentication", "userAuthentication"); document.getElementById("login").textContent = "Login/Registration"; else { // User is logged in // Since the user must have localStorage set up console.log("redirecting to account page"); document.getElementById("login").textContent = "Account"; } } El atributo getItem devuelve null si el elemento no existe; lo que significa que el elemento aún no se ha configurado. si es así, debemos configurar LocalStorage y cambiar el texto del botón de inicio de sesión a "Iniciar sesión/Registrarse". De lo contrario, se debe configurar localStorage , lo que significa que podemos cambiar el texto del botón de inicio de sesión a "Cuenta".