Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Kristian Woods
Kristian Woods
23,414 Points

How to create a form that allows 3 separate users and allows 3 attempts to successfully log in

Hello, I'm trying to create a form field that allows for 3 separate users, and allows 3 attempts to successfully log in - otherwise, each form field is disabled.

So far, I have created an array that holds an object. The object contains information on each persons log in details e.g. username and password.

I have then looped through each object and stored that information into a few variables. I then check to see if the value held in the form field matches any of the log in information that is contained within the variables.

If the value doesn't match the information, a red alert pops up. If the log in is successful, then a green alert pops up.

Thats what i'd like to happen.... however, the only result i'm getting is a red alert pop up, never a green. Even when I enter the correct information

Hope anyone can help me,

Thank you 

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
    <div id="main-alert-red">

    </div>
    <div id="main-alert-green">

    </div>
    <div id="div-1">
        <form id="form">
            <input type="text" placeholder="Enter Name" id="userName"><br>           
            <input type="password" placeholder="Enter Password" id="password"><br>
            <span id="hint">password is 6 characters long</span>
            <input type="submit" value="Submit" id="submit">
        </form>
        <img src="green-check.svg" id="greenCheck">


    </div>
    <script src="password-part-2.js"></script>
</body>
</html>

var attempts = 1;
var form = document.getElementById("form");
var greenCheck = document.getElementById("greenCheck");
var alertBoxRed = document.getElementById("main-alert-red");
var alertBoxGreen = document.getElementById("main-alert-green");
var submitBtn = document.getElementById("submit");
var userName = document.getElementById("userName");
var password = document.getElementById("password");
var users;
var logIn;

var userList = [
    {
        name: "anka",
        password: "H2X835"
    },
    {
        name: "bob",
        password: "bob"
    },
    {
        name: "jon",
        password: "jon"
    }
];

var submit = function(e) {

for (var i = 0; i < userList.length; i++) {
    users = userList[i].name;
    logIn = userList[i].password;
    if(userName.value !== users && password.value !== logIn) {

        e.preventDefault();
        alertBoxRed.innerHTML = "<h3>You have entered the wrong information. Please try again " + "[" + attempts + " attempt[s]" + " out of 3 to log in]</h3>";
        alertBoxRed.style.display = "block";
        attempts += 1;
        userName.value = "";
        password.value = "";
        if (attempts > 3) {
            alertBoxRed.innerHTML = "<h3>Denied!</h3>";
            userName.disabled = true;
            password.disabled = true;
            submitBtn.disabled = true;
        }
    } else {
        e.preventDefault();
        alertBoxGreen.innerHTML = "<h3>Welcome back, " + userName.value + "!</h3>";
        alertBoxGreen.style.display = "block";
        alertBoxRed.style.display = "none";
        form.style.display = "none";
        greenCheck.style.display = "inline-block";
        userName.value = "";
        password.value = "";


    }
}
}

submitBtn.onclick = submit;
Kristian Woods
Kristian Woods
23,414 Points

On a side note, I know this isn't a secure method to hold information. I'm just experimenting with JS

2 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

So your problem is, that you're essentially going to always get false for the username/password conditional for at least two of the users, since at most only one can be correct. And because you loop through the userList in the same order each time, it will only work if the user puts in the details for the last user in the list.

Instead, use another variable like correct, accepted or something like that, with an initial value of false, and then just change that to true when you're checking if the entered password matches each user (leave it if they don't match).

Then you can update the form fields and attempt count after the loop finishes, based on that value, then display welcome/error messages if they got it right or ran out of attempts.

Maybe try this:

var attempts = 1;
var form = document.getElementById("form");
var greenCheck = document.getElementById("greenCheck");
var alertBoxRed = document.getElementById("main-alert-red");
var alertBoxGreen = document.getElementById("main-alert-green");
var submitBtn = document.getElementById("submit");
var userName = document.getElementById("userName");
var password = document.getElementById("password");
var users;
var logIn;
var accepted = false;

var userList = [
    {
        name: "anka",
        password: "H2X835"
    },
    {
        name: "bob",
        password: "bob"
    },
    {
        name: "jon",
        password: "jon"
    }
];

var submit = function(e) {

    e.preventDefault();

    for (var i = 0; i < userList.length; i++) {
        users = userList[i].name;
        logIn = userList[i].password;
        if (userName.value === users && password.value === logIn) {
            accepted = true;
        }
    }

    if (accepted) {
        alertBoxGreen.innerHTML = "<h3>Welcome back, " + userName.value + "!</h3>";
        alertBoxGreen.style.display = "block";
        alertBoxRed.style.display = "none";
        form.style.display = "none";
        greenCheck.style.display = "inline-block";
        userName.value = "";
        password.value = "";
    } else if (attempts > 3) {
        alertBoxRed.innerHTML = "<h3>Denied!</h3>";
        alertBoxRed.style.display = "block";
        userName.disabled = true;
        password.disabled = true;
        submitBtn.disabled = true;
    } else {
        alertBoxRed.innerHTML = "<h3>You have entered the wrong information. Please try again " + "[" + attempts + " attempt[s]" + " out of 3 to log in]</h3>";
        alertBoxRed.style.display = "block";
        attempts += 1;
        userName.value = "";
        password.value = "";
    }
}

submitBtn.onclick = submit;
Kristian Woods
Kristian Woods
23,414 Points
Kristian Woods
Kristian Woods
23,414 Points

Hey man, thank you so much for getting back to me. Your solution worked.

However, I don't understand where I went wrong in my original code... for example, why wasn't the loop working? Why was I only getting back one set of information?

Thanks again

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi, sorry, I probably didn't explain it very well, but because you were changing the HTML in every iteration of the loop, only the last one would remain at the end, which would be based on whether the username and password matched the last one in the array.

You instead needed to only check if the username and passwords matched any of the items, regardless of their position in the array, and then display the corresponding message.

Kristian Woods
Kristian Woods
23,414 Points

Awesome, thanks, man