开发Hangman游戏时如何检查两个元素的textContent内容是否匹配

现有代码存在的问题 #

• Array.some()的回调函数缺少返回值：你传入some的回调没有显式返回匹配结果，运行时回调始终返回undefined，转为布尔值为false，导致check变量永远是false，无论点击的字母是否存在都会输出doesnt。
• 隐藏字母列表查询时机错误：你在绑定点击事件的阶段就提前查询了所有.hidden元素并缓存了列表，如果游戏过程中猜对字母后会移除对应元素的hidden类，缓存的列表不会同步更新，后续的匹配判断都会出错。
• 未处理大小写兼容问题（潜在问题）：如果按钮上的字母和隐藏字母的大小写不一致，会导致匹配失败，建议统一大小写后再做判断。

正确实现代码 #

for(let i = 0; i < letters.length; i++){
    const letter = letters[i]
    letter.addEventListener('click', ()=>{
        // 每次点击时再查询最新的隐藏字母列表，保证数据是最新的
        const hiddenLetters = Array.from(document.querySelectorAll('.hidden'))
        // 给some回调补充返回逻辑，同时统一转小写匹配
        const check = hiddenLetters.some(hiddenLetter => {
            return hiddenLetter.textContent.toLowerCase() === letter.textContent.toLowerCase()
        })
        // 也可以用箭头函数简写省略return和大括号：
        // const check = hiddenLetters.some(hiddenLetter => hiddenLetter.textContent.toLowerCase() === letter.textContent.toLowerCase())
        if(check){
            console.log('works')
            // 可在此补充猜对后的逻辑：展示对应字母、移除hidden类等
        } else{
            console.log('doesnt')
            // 可在此补充猜错后的逻辑：扣除生命值、绘制hangman部位等
        }
    })
}

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