I'm building a demo login form. For the demo, I'd like two things to happen:
Here's how my code looks so far:
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>Using onsubmit="toggleError(); return false;" achieves my first objective of displaying an error message.
How would I extend this function so the user is directed to a page when they click the button for a second time? I'm guessing I would write some type of loop?
Based on first two comments here a possible way:
<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>