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');
    
        } 
    }
};

Answer 1

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>