JavaScript中使用for循环查找输入值的问题求助

你的代码逻辑存在两个核心问题，导致只有数组最后一个元素能生效：

1. 错误的匹配逻辑：你把数组元素逐个拼到ggg元素里，然后拿整个拼接后的字符串和输入值对比，这根本不是检查单个元素是否存在的正确方式。
2. 结果被循环覆盖：每次循环都会直接修改tr的内容，就算前面已经找到匹配项，后面的循环迭代也会把结果覆盖，最终只保留最后一次循环的判断结果。

修复后的代码 #

<p id="ggg"></p>
<p id="tr"></p>
<input type="text" id="WW" value="">
<button type="submit" id="searchh">Search for name</button>
<script>
var arry = ["ASd", "aa", "frgr", "rgtg", "gtfh"]

document.getElementById("searchh").addEventListener("click", function() {
    const inputVal = document.getElementById("WW").value.toLowerCase();
    let isFound = false;
    // 清空之前的显示内容
    document.getElementById("ggg").innerHTML = "";

    for (let p = 0; p < arry.length; p++) {
        // 把数组元素显示到ggg里
        document.getElementById("ggg").innerHTML += arry[p] + " ";
        // 单独对比当前数组元素和输入值
        if (arry[p].toLowerCase() === inputVal) {
            isFound = true;
            // 找到后可以提前终止循环，优化性能
            break;
        }
    }

    // 循环结束后统一更新结果
    if (isFound) {
        document.getElementById("tr").innerHTML = "Student name found";
    } else {
        document.getElementById("tr").innerHTML = "No match found";
    }
})
</script>

关键修改说明 #

• 新增isFound标志位，用来记录是否找到匹配项，避免循环中频繁修改结果导致覆盖。
• 直接将数组单个元素转为小写和输入值对比，这才是检查元素是否存在的正确逻辑。
• 循环结束后再统一设置结果内容，确保最终显示的是正确的匹配状态。
• 找到匹配项后可以用break终止循环，减少不必要的迭代。
• 每次点击搜索时先清空ggg的内容，避免多次点击后内容累加混乱。

内容的提问来源于stack exchange，提问作者بغية السالِك