JavaScript输入验证异常：匹配数组元素却判定为不匹配

你遇到的核心问题是代码存在多处逻辑错误，导致匹配判断永远不成立，直接走了错误分支。下面是具体问题分析和修复方案：

核心错误点 #

• 错误比较DOM元素而非输入值：handleKeyUp函数里的ansOutput是获取的input元素本身，不是用户输入的内容。需要用ansOutput.value获取输入框文本，再和目标单词ranWord比较。
• 逻辑运算符转义错误：代码里的&&是HTML转义字符，JS中应直接写&&，否则会被解析为按位与运算符，导致逻辑判断失效。
• 事件重复绑定：每次按下空格键触发focusIn时，都会给输入框绑定一次keydown事件，多次触发后逻辑混乱，应只绑定一次事件。
• 变量作用域与重复声明：wordList、display等变量在全局和focusIn里重复声明，容易导致变量引用混乱；timeDisplay在handleKeyUp里未提前获取，可能出现未定义问题。

修复后的代码 #

JavaScript代码 #

const output = document.querySelector("#typedWord");
const timeDisplay = document.querySelector("#timeDisplay");
const display = document.querySelector("#wordDisplay");
const wordList = ['Carvedilol', 'Histrelin', 'Kadcyla', 'Mavyret', 'Paracetamol', 'Raloxifene', 'Saxagliptin'];
let currentWord = '';

// 全局绑定事件，避免重复绑定
window.addEventListener('keydown', focusIn);
output.addEventListener('keydown', handleKeyUp);

function focusIn(event) {
  if (event.keyCode === 32) {
    // 生成随机单词并显示
    const randomIndex = Math.floor(Math.random() * wordList.length);
    currentWord = wordList[randomIndex];
    display.innerHTML = currentWord;
    // 重置状态
    timeDisplay.innerHTML = '';
    output.value = '';
    // 启动倒计时
    setTimeout(() => {
      timeDisplay.innerHTML = "Time Up!";
      console.log("time event");
    }, 6000);
  }
}

function handleKeyUp(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    event.target.blur();
    const userInput = output.value.trim(); // 去除输入前后空格
    if (userInput === currentWord) {
      timeDisplay.innerHTML = "Correct!";
      console.log('correct executed');
    } else {
      timeDisplay.innerHTML = "Incorrect!";
      console.log('incorrect executed');
    }
  }
}

HTML代码 #

<header>
  <h1>Type A Word Challenge!</h1>
</header>
<main>
  <div id="wordDisplay"></div>
  <br>
  <div id="timeDisplay"></div>
  <br>
  <label>Type Word Here</label>
  <input type="text" id="typedWord" name="userOut">
  <h3>Press Spacebar to Begin</h3>
</main>

修复说明 #

1. 将currentWord设为全局变量，确保handleKeyUp能获取到当前显示的目标单词。
2. 事件绑定移至全局，避免重复绑定导致的多次触发。
3. 使用output.value获取用户输入，增加trim()处理输入前后空格，避免因空格导致匹配失败。
4. 合并两个if判断为else分支，简化逻辑，避免重复判断回车事件。
5. 每次按下空格键时重置输入框和时间提示，优化用户体验。

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