If click count number JavaScript

Question

I'm building a demo login form. For the demo, I'd like two things to happen:

When the user clicks the login button for the first time, an error message appears.
When the user clicks the login button for the second time, they are directed to another page.

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?

Why a loop? A simple counter variable should do. You increase its value by one in your event handler function - and then based on that current value, you decide what to do ... — C3roe
– C3roe, Commented Oct 4, 2021 at 9:24
I suggested a loop because my knowledge of JS is limited. Can you please show me an example of using a simple counter variable? — Sam
– Sam, Commented Oct 4, 2021 at 9:25
var clickCounter = 0; outside of your function (global variable - those aren't generally considered too "nice", but you can work on improving things later.) clickCounter++; first thing in your handler function. And then proceed with if/else to do different things, based on whether the value is 1 or 2 ... — C3roe
– C3roe, Commented Oct 4, 2021 at 9:29
Instead of a counter, you can use two event handlers and swap them. — lupz
– lupz, Commented Oct 4, 2021 at 9:29
👆🏻 Thanks folks, this has been a huge help and helped me search for the right terms. — Sam
– Sam, Commented Oct 4, 2021 at 9:42

Wai Ha Lee · Accepted Answer · 2021-10-04 13:36:05Z

2

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>

edited Oct 4, 2021 at 13:36

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Oct 4, 2021 at 9:33

Reporter

3,9345 gold badges36 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

If click count number JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related