输入指定名称后基于函数结果的if语句未生效问题求助

你的代码核心问题在于 rfOption 和 lfOption 函数没有返回值，导致末尾的 if(lfOption() && rfOption()) 判断永远不成立——因为函数默认返回 undefined，undefined && undefined 的结果是 false，自然不会触发显示completed元素。

另外，原代码里的if语句只会在页面加载时执行一次，不会监听输入框的实时变化，哪怕后来输入了正确的值，也不会重新触发判断。

修复步骤： #

1. 给两个函数添加返回值
   在函数内部，当输入匹配正确值时返回true，否则返回false，这样才能用它们的返回值做逻辑判断。

2. 新增检查函数并绑定输入事件
   写一个专门的函数来检查两个输入是否都正确，然后控制completed元素的显示。同时给两个输入框绑定input事件，每次输入内容变化时自动触发检查。

修改后的完整代码： #

function rfOption(){
    var rfInput = document.getElementById("rf-name").value;
    var rfPic = document.getElementById("rf-img");
    // 判断输入是否匹配
    const isMatch = rfInput === "Kanu" || rfInput === "kanu";
    // 设置图片
    rfPic.src = isMatch ? 'missingMen/Arsenal/Kanu.jpeg' : 'pictures/questionMark.jpeg';
    // 返回判断结果
    return isMatch;
}

function lfOption(){
    var lfInput = document.getElementById("lf-name").value;
    var lfPic = document.getElementById("lf-img");
    const isMatch = lfInput === "Henry" || lfInput === "henry";
    lfPic.src = isMatch ? 'missingMen/Arsenal/Henry.jpeg' : 'pictures/questionMark.jpeg';
    return isMatch;
} 

// 新增检查函数
function checkCompleted() {
    if(lfOption() && rfOption()){
        document.getElementById("completed").style.display = "block";
    } else {
        // 可选：输入不正确时隐藏元素
        document.getElementById("completed").style.display = "none";
    }
}

// 给输入框绑定事件，实时监听输入变化
document.getElementById("rf-name").addEventListener('input', checkCompleted);
document.getElementById("lf-name").addEventListener('input', checkCompleted);

说明： #

• 两个选项函数现在会返回布尔值，表示当前输入是否匹配要求；
• checkCompleted 函数会在每次输入变化时被调用，实时判断是否要显示完成提示；
• 新增了else分支，确保输入错误时隐藏提示元素（如果不需要可以去掉）。

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