基础JavaScript姓名输入验证求助：始终进入else分支

问题根源 #

你在页面加载时就获取了输入框的value并赋值给username，此时输入框是空字符串。之后点击提交按钮时，username始终是初始的空值，不会同步用户输入的内容，所以不管输入什么，都匹配不到if/else if的条件，直接进入else分支。

修复后的JavaScript代码 #

把获取输入框值的逻辑移到点击事件的回调函数内部，确保每次点击按钮时都能拿到最新的输入内容：

let submit = document.getElementById("submitBtn");
let output = document.getElementById("outputName");

submit.onclick = function(){
    // 每次点击时才获取当前输入框的值
    let username = document.getElementById("textField").value;
    if(username === "Rodney" || username === "rodney"){
        output.innerHTML = username + " access denied";
    }
    else if(username === "Alexander" || username === "alexander"){
        output.innerHTML = username + " access granted";
    }
    else{
        output.innerHTML = username + " not defined";
    }
}

优化建议 #

可以将输入内容统一转为小写（或大写），同时去除首尾空格，减少重复的条件判断，让代码更简洁：

let submit = document.getElementById("submitBtn");
let output = document.getElementById("outputName");
let textField = document.getElementById("textField"); // 提前获取输入框元素，避免重复查询DOM

submit.onclick = function(){
    let username = textField.value.trim().toLowerCase();
    if(username === "rodney"){
        output.innerHTML = textField.value + " access denied";
    }
    else if(username === "alexander"){
        output.innerHTML = textField.value + " access granted";
    }
    else{
        output.innerHTML = textField.value + " not defined";
    }
}

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