Estoy creando un formulario de inicio de sesión de demostración. Para la demostración, me gustaría que sucedieran dos cosas:
Así es como se ve mi código hasta ahora:
function toggleError() { var toggleError = document.querySelector('.message--error'); toggleError.classList.toggle('error-toggled'); } .message { display: none; } .error-toggled { display: block; } <div class="message message--error"> <span class="message__text">The login details you entered are incorrect.</span> </div> <form onsubmit="toggleError(); return false;" action="/" method="get" class="login__form" autocomplete="off"> <label for="email" class="srt">Email</label> <input type="email" name="email" id="email" required placeholder="Email" class="input input--border-right"> <label for="password" class="srt">Password</label> <input type="password" name="password" id="password" required placeholder="Password" class="input"> <div class="login__actions"> <button type="submit" class="button">Log In</button> <a href="index.html" class="login__anchor">Lost your password?</a> </div> </form> Usando onsubmit="toggleError(); return false;" logra mi primer objetivo de mostrar un mensaje de error.
¿Cómo extendería esta función para que el usuario sea dirigido a una página cuando haga clic en el botón por segunda vez? ¿Supongo que escribiría algún tipo de bucle?
Basado en los dos primeros comentarios aquí una forma posible:
<script> var clickCounter=0; function toggleError() { //Increase the value by one clickCounter++; if (clickCounter == 1) { //what ever you want to do return false; } else if (clickCounter == 2) { //You need to change the value again ... var toggleError = document.querySelector('.message--error'); toggleError.classList.toggle('error-toggled'); return false; } } </script>