Why do I keep getting my if statement alert as well as my else alert when using an array?

Question

I'm working on a school project and am in need of some guidance. I have issues identifying the fault making both my if and else alerts show up when I click my login button. It only recognises the first user in the array as well.

When I've tried this without an array it works, but as I want to have two users I find it's probably more apt to use and array, right? I've tried making the loginButton click event an arrow function, as well as making my else an else if but I'm not having much luck with that either. I essentially just want the exact same result but without triggering the else alert when my if statement is true, as well as being able to log in with either of my user credentials. I'm very much a novice at this fine art so please be gentle. Thankful for any help!

let loginButton = document.getElementById('login-button');

let userCred = [
    {
        username: 'Peregrin',
        password: 'SecondBreakfast'
    },
    {
        username: 'Meriadoc',
        password: 'Elevenses'
    }];

loginButton.addEventListener('click', loginUser);

function loginUser(){
    
    let username = document.getElementById('user').value;
    let password = document.getElementById('password').value;

    for(i = 0; i < userCred.length; i++){
        if(username == userCred[i].username && password == userCred[i].password){    
            window.location.assign('bank.html');
            alert('Login Successful');
        } else {
            alert('Invalid information');
    
        } 
    }
};

My ***guess***, you get both alerts because the condition is true for one element in the array, and false for another. Why don't you use a [*debugger*](https://stackoverflow.com/questions/25385173/what-is-a-debugger-and-how-can-it-help-me-diagnose-problems) to step through the code to help you figure it out? — Some programmer dude, Jul 25 '23 at 08:55
you may alert login failed only at the end of the loop so that in case of success the browser will just be redirected and won't ever hit that line. But yet you have a strange scenario there... holding credentials in plain sight in the js — Diego D, Jul 25 '23 at 08:58
You've got to break out of the for loop when you get a hit. And welcome to SO: you'll find loads of people wanting to downvote or close anythinng, so you'll need to man up. Or woman up. — EML, Jul 25 '23 at 08:58
If you only want to know if there is a user with _matching_ credentials, you can check for that _in_ the loop (and then break the loop off, after you found one.) But if you want to determine if none of the given users matched the entered credentials - then you obviously can't determine that while you are _in_ the loop; you will only know this _after_ the loop, after you determined that every single one was _not_ a match. — CBroe, Jul 25 '23 at 09:01
Thanks. The debugger didn't detect any problems, I don't know if it's a shitty debugger or what, I'll look into that. Conserning the credentials, like I wrote, it's a school project for javascript beginners so there's no need for it to be hidden. — hejpingvin, Jul 25 '23 at 09:25
@hejpingvin It's not the debugger that should detect any problems, when you add a few breakpoints to your code, you can go through your code step by step and look at, for example, what value `i` has, and then check if the login condition should be met. The Debugger doesn't find problems on its own — Luca Kiebel, Jul 25 '23 at 10:00

Alexander Nenashev · Accepted Answer · 2023-07-25T09:21:39.833

The problem with your code that you shouldn't show Invalid information with the first wrong login because some further value could be valid. Also when the proper login is found you should break your loop for example with return statement to avoid looping further thus displaying Invalid information after Login successful.

Also you should declare the iteration index i as let i otherwise you are using a global variable and it will fail in the strict mode:

<input id="user" value="Meriadoc">
<input id="password" value="Elevenses">
<button id="login-button">Login</button>
<script>

'use strict';

let loginButton = document.getElementById('login-button');

let userCred = [
    {
        username: 'Peregrin',
        password: 'SecondBreakfast'
    },
    {
        username: 'Meriadoc',
        password: 'Elevenses'
    }];

loginButton.addEventListener('click', loginUser);

function loginUser(){
    
    let username = document.getElementById('user').value;
    let password = document.getElementById('password').value;

    for(i = 0; i < userCred.length; i++){
        if(username === login.username && password === login.password){    
            alert('Login Successful');
            window.location.assign('bank.html');
            return;
        } 
    }
    alert('Invalid information');
};
</script>

Since you don't need the index here you could use just for(const login of userCred).

So your loop could look like this:

let loginButton = document.getElementById('login-button');

let userCred = [
    {
        username: 'Peregrin',
        password: 'SecondBreakfast'
    },
    {
        username: 'Meriadoc',
        password: 'Elevenses'
    }];

loginButton.addEventListener('click', loginUser);

function loginUser(){
    
    let username = document.getElementById('user').value;
    let password = document.getElementById('password').value;

    for(const login of userCred){
        if(username === login.username && password === login.password){    
            alert('Login Successful');
            window.location.assign('bank.html');
            return;
        } 
    }
    alert('Invalid information');
};

<input id="user" value="Meriadoc">
<input id="password" value="Elevenses">
<button id="login-button">Login</button>

You could also use Array::some() to find whether the array of logins contains credentials entered:

let loginButton = document.getElementById('login-button');

let userCred = [
    {
        username: 'Peregrin',
        password: 'SecondBreakfast'
    },
    {
        username: 'Meriadoc',
        password: 'Elevenses'
    }];

loginButton.addEventListener('click', loginUser);

function loginUser(){
    
    let username = document.getElementById('user').value;
    let password = document.getElementById('password').value;

    const loginFound = userCred.some(user => user.username === username && user.password === password);
   
    if(loginFound){
      alert('Login Successful');
      window.location.assign('bank.html');
      return;
    }
    
    alert('Invalid information');
};

<input id="user" value="Meriadoc">
<input id="password" value="Elevenses">
<button id="login-button">Login</button>

This is really helpful! Thank you! – hejpingvin Jul 25 '23 at 09:26 — hejpingvin, Jul 25 '23 at 09:26

Why do I keep getting my if statement alert as well as my else alert when using an array?

1 Answers1