JavaScript数组实现登录：if/else弹窗同时触发且仅识别首个用户求助

问题根源分析 #

你的代码核心问题出在循环内的逻辑处理：

1. 每遍历一个用户，只要不匹配就立刻弹出错误提示，而非等所有用户校验完成后再判断是否真的无匹配项。比如用第二个用户登录时，第一个用户不匹配会先弹错误，第二个匹配才执行登录，导致两个弹窗同时出现。
2. window.location.assign会立刻触发页面跳转，后续的alert('Login Successful')大概率不会执行（页面跳转后当前上下文销毁）。
3. 循环变量i未用let声明，会成为全局变量，可能引发意外问题。

修复后的代码（基础循环版） #

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;
    let isUserFound = false; // 标记是否找到匹配用户

    // 用let声明循环变量，避免全局污染
    for(let i = 0; i < userCred.length; i++){
        if(username === userCred[i].username && password === userCred[i].password){    
            isUserFound = true;
            break; // 找到匹配项后跳出循环，无需继续校验
        }
    }

    // 统一处理校验结果
    if(isUserFound){
        alert('Login Successful');
        window.location.assign('bank.html'); // 先弹提示再跳转，确保用户能看到
    } else {
        alert('Invalid information');
    }
};

更简洁的写法（数组find方法） #

对于新手，推荐使用数组的find方法，代码更易读：

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;

    // 查找匹配的用户，无匹配则返回undefined
    const matchedUser = userCred.find(user => 
        user.username === username && user.password === password
    );

    if(matchedUser){
        alert('Login Successful');
        window.location.assign('bank.html');
    } else {
        alert('Invalid information');
    }
};

关键修改说明 #

• 新增isUserFound标记：循环内只做匹配判断，不直接触发弹窗/跳转，避免中途弹出错误提示。
• 找到匹配项后break循环：减少不必要的遍历，提升效率。
• 统一结果处理：循环结束后再根据标记执行成功或失败逻辑，确保弹窗不会同时触发。
• 调整弹窗与跳转顺序：先弹出成功提示，再执行页面跳转，避免提示被跳转打断。

内容的提问来源于stack exchange，提问作者hejpingvin