JavaScript中Restart Button无法显示问题求助（含代码）

问题核心原因 #

你只在页面加载时将Restart按钮设为display: none隐藏，但没有在测试结束的逻辑中添加显示它的代码，所以它一直处于隐藏状态。

具体修改步骤 #

1. 完善Stop按钮触发的displayResult函数 #

点击Stop按钮后，需要隐藏Start/Stop按钮，同时显示Restart按钮。在你的displayResult函数中添加以下代码：

function displayResult() {
  // 停止计时器（原有逻辑）
  clearInterval(timer);
  // 禁用输入框（原有逻辑）
  userInput.disabled = true;
  
  // 新增：控制按钮显示/隐藏
  document.getElementById("start-test").style.display = "none";
  document.getElementById("stop-test").style.display = "none";
  document.getElementById("restart-test").style.display = "block";
  
  // 显示结果区域（原有逻辑）
  document.querySelector(".result").style.display = "block";
  // 计算并展示WPM、准确率等结果（原有逻辑）
}

2. 确认restartTest函数的按钮状态控制 #

你的restartTest函数已经正确处理了重启后的按钮状态（显示Start，隐藏Stop），可以再明确加上隐藏Restart按钮的代码，逻辑更清晰：

const restartTest = () => {
  // 重置变量
  mistakes = 0;
  timer = "";
  time = 60;
  
  // Reset UI
  userInput.disabled = false;
  userInput.value = "";
  document.getElementById("start-test").style.display = "block";
  document.getElementById("stop-test").style.display = "none";
  document.getElementById("restart-test").style.display = "none"; // 明确隐藏Restart按钮
  document.querySelector(".result").style.display = "none";
  document.getElementById("mistakes").innerText = "0";
  document.getElementById("timer").innerText = "60s";
  document.getElementById("wpm").innerText = "0 wpm";
  document.getElementById("accuracy").innerText = "0 %";

  renderNewQuote();
};

额外说明 #

• 你的HTML中三个按钮的定义是正确的，问题出在JavaScript的显示逻辑缺失。
• 确保displayResult函数已经正确实现了停止测试、计算结果的逻辑，再加上按钮状态控制即可。

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