JavaScript登录页面问题：排查数组中用户名密码匹配失效问题

问题根源拆解 #

你的登录函数存在几个关键错误，直接导致点击按钮后无任何反应：

• 内层循环变量错误：内层循环里写的是for(var j=0; j<passwords.length; i++)，错误地递增了外层的i而非内层的j，导致循环逻辑彻底混乱，函数无法正常执行完成。
• 冗余的双层循环：用户名和密码是一一对应的索引关系，完全不需要嵌套两层循环，单层循环或直接通过索引匹配即可。
• 匹配逻辑错误：
  • 用includes判断是检查输入内容是否被包含在数组元素中，但需求是完全匹配用户名和密码，应该用严格相等===。
  • users.indexOf(a) == passwords.indexOf(b)的判断逻辑有漏洞：若输入的用户名和密码都不存在（都返回-1），会被误判为匹配，但实际两者都是无效凭证。
• 未重置提示状态：每次登录前未清空之前的成功/失败提示，可能导致多次点击后内容叠加，影响视觉效果。

修正后的代码 #

JavaScript 部分

const users = ["java", "visual", "personal", "key", "master"];
const passwords = ["script", "studio", "computer", "board", "chief"];

function login() {
    // 获取输入值并去除首尾空格，避免空格导致匹配失败
    const username = document.getElementById("usn").value.trim();
    const password = document.getElementById("psw").value.trim();
    
    // 重置提示状态，清空上一次的提示内容和样式
    const successEl = document.getElementById("success");
    const failEl = document.getElementById("fail");
    successEl.innerHTML = "";
    successEl.style.backgroundColor = "";
    failEl.innerHTML = "";
    failEl.style.backgroundColor = "";

    // 找到用户名对应的索引
    const userIndex = users.indexOf(username);
    // 验证索引有效且对应位置的密码匹配
    if (userIndex !== -1 && passwords[userIndex] === password) {
        successEl.innerHTML = "Login successful";
        successEl.style.backgroundColor = "green";
    } else {
        failEl.innerHTML = "Login failed, user not registered or password wrong";
        failEl.style.backgroundColor = "red";
    }
}

额外优化说明

1. 增加.trim()处理输入，避免用户不小心输入首尾空格导致匹配失败。
2. 简化逻辑：直接通过indexOf定位用户名的位置，再验证对应索引的密码是否一致，比循环更高效直观。
3. 每次登录前重置提示的内容和样式，避免旧提示干扰新的验证结果。

原代码其他部分（可正常保留） #

HTML

<div class="col-md-5 col-sm-6 col-12">
    <p class="font title pt-3">Login</p>
    <p class="font">Don't have an account yet? <span>Create yours now</span>, it takes just a few seconds.</p>
    <div id="fail" class="pt-2 pb-2 ps-1 pe-1 font"></div>
    <div id="success" class="pt-2 pb-2 ps-1 pe-1 font"></div>
    <br>
    <div>
        <p class="font">Username</p>
        <div>
            <input type="text" class="inf pb-3 inf" id="usn" onclick="switchColors()">
        </div>
    </div>
    <br>
    <div>
        <p class="font">Password</p>
        <div>
            <input type="text" class="inf pb-3 inf" id="psw" onclick="switchColors()">
            <i class="bi bi-eye-slash" id="eye2" onclick="change()"></i>
            <i class="bi bi-eye hidden" id="eye1" onclick="change()"></i>
        </div>
    </div>
    <br>
    <button type="button" class="btn btn-primary" id="btn" onclick="login()">Login</button>
</div>

CSS

.inf{
    border: none;
    outline: none;
    border-bottom: 1px solid black;
}

.hidden{
    display: none;
}

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