空格键触发keydown事件显示随机单词功能失效求助

我需要给keydown事件监听器设置空格键触发逻辑，按下空格键时显示数组中的随机单词，但if条件语句未生效。按下空格键时display.innerHTML无任何反应，移除if语句后，功能会对所有按键生效，而非仅限定空格键。

原代码 #

HTML部分 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="script.js"></script>
  <title>Type Game</title>
</head>
<body>
  <header>
    <h1>Type A Word Challenge!</h1>
  </header>
  <main>
    <div id="wordDisplay"></div>
    <br>
    <label>Type Word Here</label>
    <input type="text" id="typedWord">
    <h3>Press Spacebar to Begin
  </main>
</body>
</html>

JavaScript部分 #

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");
  if (keyCode === 32) {display.innerHTML = ranWord}
}

问题原因及修复方案 #

1. 核心问题：未正确引用事件对象的keyCode #

你的代码中直接使用了keyCode变量，但这个变量并未定义，按键编码需要从传入的event对象中获取，即event.keyCode。

2. 额外优化：阻止空格键默认行为 #

按下空格键会触发页面滚动的默认行为，添加event.preventDefault()可以避免这个干扰。

3. HTML标签修复 #

原HTML中的<h3>标签未闭合，可能导致页面渲染异常，需要补充闭合标签。

修改后的代码 #

JavaScript部分 #

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");
  
  if (event.keyCode === 32) {
    event.preventDefault();
    display.innerHTML = ranWord;
  }
}

HTML修正部分 #

将未闭合的<h3>标签改为：

<h3>Press Spacebar to Begin</h3>

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