How do you disable a form input after 3 log in attempts?

Hey, thanks for the response. But, no, this is just messing around with JS

Okay good. Did Matt Milburn's answer help?

Hey, I see the logic in Matt's thinking, however, the code didn't work. After 3 wrong attempts, the same "wrong info" alert keeps popping up, but never the "denied" alert...

I think as written you would see "wrong info" 4 times and then "denied"

Have you verified that attempts is increasing?

You want to make sure too that when you moved the var declaration of attempts outside the function you're not still using the var keyword inside the submit function.

If you have var attempts += 1 then that will create a local variable named attempts which masks your global variable attempts

Yeah, I doubled checked to see if the "attempts" variable was increasing with each attempt. However, after the submit button has been pressed, it resets the "attempts" variable. So, the variable never increments. I moved the variable outside of the function, too

Could you repost your modified code? Maybe something else is going on.

Matt's answer should have worked for you.

Hey, thank you so much for getting back to me, Jason. I really appreciate your input. Your solution worked! Just a quick question about your solution - regarding the preventDefault method.

I had previously tried the preventDefault method on the submit button, however, the result disabled the button altogether. So I couldn't even submit anything. Can you target a specific event to disable?

Just to be clear on your solution - you created a function named "submit", that function takes a parameter of "evt", you then use the preventDefault method inside the "if statement" - you then attach this function to the Submit button, - this results in default action of the submit button to stop i.e. submitting the information and reloading the page?

I'm not sure what you mean by "Can you target a specific event to disable?"

The event object that's passed into the handler contains information about the event. So when you call the preventDefault() method, you're cancelling whatever event that object is for.

I'm not sure where you put the call to the preventDefault method but if you put it at the top of the function then it would always prevent form submission even when the username and password are correct.

Your description of the code seems to be good. Sometimes you'll see the parameter named "e" or "event".

You can add

submitBtn.disabled = true;

where the alert "denied" is if you want to actually disable the button so you can't click on it anymore. And as Kevin mentioned, this is not going to be secure.

Hey Kristian,

I think you have 2 problems going on here. I'll put this here so the complete solution is in 1 answer.

It finally hit me that you're not actually preventing the default submit action which is to submit the form. So your submit function is executed and then the form is submitted. Since no action attribute is specified it will submit to itself.

The page is effectively reloading each time you click the submit button so your attempts variable keeps getting reset.

If you're doing this on your local file system then you likely wouldn't notice because it's happening so fast. However, if you're able to launch a local server of some kind and run your page through that then you can check the network tab of your browser's dev tools. After clearing the alert you should see that the page is reloading.

To fix it, you need to call preventDefault() on the event object. This prevents the form submission.

Updated code:

    var submit = function(evt) {

    var userName = document.getElementById("userName");
    var password = document.getElementById("password");

    if(userName.value !== "anka" && password.value !== "H2X835") {
    evt.preventDefault();
        alert("Wrong Info");
        attempts += 1;
        if (attempts > 3) {
            alert("denied");
            submitBtn.disabled = true;
        }
    } else {
        alert("welcome");
    } // end of if statement

} // end of function

I added the evt parameter to the function to hold the event object that is passed in. Then called preventDefault() inside the if block. I also added the code to disable the button.

If the else block is reached then the form will be submitted after clearing the "Welcome" alert.