如何实现输入完整单词后校验输入与数组随机字符串是否匹配？

问题说明 #

我正在实现一项功能，需要校验用户输入内容是否匹配数组中的随机字符串。当前代码存在问题：用户开始输入时就会显示“Incorrect!”提示，且无法显示“Correct!”提示。希望修改代码，实现用户输入完整单词后再显示校验结果。

原代码 #

window.addEventListener('keydown', randomD);
 
function randomD(event) {
const wordList = ['Carvedilol', 'Histrelin', 'Kadcyla', 'Mavyret', 'Paracetamol',     'Raloxifene', 'Saxagliptin'];
const random = Math.floor(Math.random() * wordList.length);
const ranWord = wordList[random];
const display = document.querySelector("#wordDisplay");
const output = document.querySelector("typedWord");
if (event.keyCode === 32) {  
  display.innerHTML = ranWord;
  setTimeout(time, 6000);
}
 if (validateWord !== ranWord) {    
    const timeDisplay = document.querySelector("#timeDisplay");
    timeDisplay.innerHTML = "Incorrect!";
  }

 if (validateWord == ranWord) {
  const timeDisplay = document.querySelector("#timeDisplay");
    timeDisplay.innerHTML = "Correct!";
 }
  
   if (event.keyCode === 32) {
      display.innerHTML = ranWord;
      setTimeout(time, 6000);
      timeDisplay.innerHTML = "";
    } 

function time(event) {
const timeDisplay = document.querySelector("#timeDisplay");
timeDisplay.innerHTML = "Time Up!";
}

function validateWord(field) {
  let output = document.querySelector("#typedWord").value; 
  }
      
}

问题分析 #

1. validateWord 定义与调用错误：把validateWord定义成函数，却直接当作变量和字符串比较，函数本身永远不等于目标单词，导致错误提示一直显示。
2. 校验时机错误：每次按键都会触发校验，用户刚输入第一个字符就弹出错误提示。
3. 变量作用域问题：ranWord在每次keydown事件中重新生成，用户输入时目标单词已经被替换，无法匹配。
4. 重复代码：生成随机单词的逻辑写了两次，冗余且易出错。

修改后的代码 #

<!-- 配套HTML结构 -->
<div id="wordDisplay"></div>
<input type="text" id="typedWord" placeholder="输入单词后按回车校验">
<div id="timeDisplay"></div>

<script>
let currentTargetWord = ''; // 全局保存当前目标单词
const wordList = ['Carvedilol', 'Histrelin', 'Kadcyla', 'Mavyret', 'Paracetamol', 'Raloxifene', 'Saxagliptin'];
const display = document.querySelector("#wordDisplay");
const timeDisplay = document.querySelector("#timeDisplay");
const inputField = document.querySelector("#typedWord");

// 生成随机单词的独立函数
function generateRandomWord() {
  const randomIndex = Math.floor(Math.random() * wordList.length);
  currentTargetWord = wordList[randomIndex];
  display.innerHTML = currentTargetWord;
  timeDisplay.innerHTML = "";
  inputField.value = ""; // 清空输入框
  setTimeout(() => {
    timeDisplay.innerHTML = "Time Up!";
  }, 6000);
}

// 校验输入的独立函数
function validateInput() {
  const userInput = inputField.value.trim();
  if (userInput === currentTargetWord) {
    timeDisplay.innerHTML = "Correct!";
  } else if (userInput !== "") { // 输入为空时不提示
    timeDisplay.innerHTML = "Incorrect!";
  }
}

// 监听空格键生成新单词
window.addEventListener('keydown', (event) => {
  if (event.keyCode === 32) {
    event.preventDefault(); // 避免空格输入到输入框
    generateRandomWord();
  }
});

// 监听回车键触发校验（输入完成后再校验）
inputField.addEventListener('keydown', (event) => {
  if (event.keyCode === 13) {
    validateInput();
  }
});
</script>

关键修改点 #

• 全局保存目标单词：用currentTargetWord变量固定当前要匹配的单词，避免每次事件触发都重新生成。
• 分离功能函数：把生成随机单词和校验输入拆成独立函数，逻辑更清晰，便于维护。
• 调整校验时机：仅在用户按回车键时触发校验，避免输入过程中频繁弹出提示。
• 修复函数调用错误：直接获取输入框的值进行比较，不再误用函数作为变量。
• 优化用户体验：生成新单词时自动清空输入框，防止空格干扰输入。

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