为什么在使用数组时我不断收到 if 语句警报和 else 警报？

Question

我正在开展一个学校项目，需要一些指导。 我在识别故障时遇到问题，当我单击登录按钮时，我的 if 和 else 警报都会显示。它也只识别数组中的第一个用户。

当我在没有数组的情况下尝试此操作时，它可以工作，但由于我想要有两个用户，我发现它可能更适合使用数组，对吧？ 我尝试过将 loginButton 单击事件设为箭头函数，并将 else 设为 else if，但我对此也没有太多运气。我本质上只是想要完全相同的结果，但当我的 if 语句为真时不触发 else 警报，并且能够使用我的任何一个用户凭据登录。 我在这门艺术方面还是个新手，所以请保持温柔。 感谢您的帮助！

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

您的代码存在问题，您不应该在第一次错误登录时显示

Invalid information

，因为其他一些值可能是有效的。此外，当您找到有效登录时，您应该

break

循环以避免在下一个周期中

Invalid information

出现错误值。

最好使用

Array::some()

来查找登录数组是否包含输入的凭据：

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);
    alert(loginFound ? 'Login Successful' : 'Invalid information');
};

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