如何在JavaScript测验中用alert显示测验结果？当前仅输出纯文本

嘿，这问题很简单，咱们直接动手改你的showResults函数就行！首先我先假设你的函数原本是在页面里输出纯文本结果（毕竟你说当前是纯文本展示），那只需要把DOM输出的逻辑换成alert()调用就搞定了。

步骤1：保留核心计算逻辑，替换输出方式 #

比如你原本的showResults可能长这样（用来往页面元素里塞结果）：

原纯文本展示的函数示例：

function showResults() {
  // 你的得分计算逻辑（比如统计答对题数）
  const correctAnswers = document.querySelectorAll('.answer.correct').length;
  const totalQuestions = 5; // 按你的实际测验题数调整
  const resultText = `你答对了${correctAnswers}题，总分${totalQuestions}分`;
  
  // 原来的纯文本展示：把结果插入到页面的某个元素里
  document.getElementById('result-container').textContent = resultText;
}

现在只需要把最后一行的DOM操作换成alert(resultText)，修改后的函数：

function showResults() {
  // 保留你原本的得分计算、结果文本生成逻辑，这部分不用动
  const correctAnswers = document.querySelectorAll('.answer.correct').length;
  const totalQuestions = 5;
  const resultText = `你答对了${correctAnswers}题，总分${totalQuestions}分`;
  
  // 用alert弹窗展示结果
  alert(resultText);
}

步骤2：如果需要多行结果，用换行符\n #

要是你想在弹窗里展示更详细的内容（比如错题列表、评语），可以用\n来换行，让内容更清晰：

function showResults() {
  const correctAnswers = document.querySelectorAll('.answer.correct').length;
  const totalQuestions = 5;
  const feedback = correctAnswers === totalQuestions ? '太棒了！全答对了🥳' : '继续加油哦💪';
  
  // 多行结果文本
  const resultText = `测验结束！\n答对题数：${correctAnswers}/${totalQuestions}\n${feedback}`;
  
  alert(resultText);
}

额外小技巧：同时保留页面展示+弹窗 #

如果你不想放弃原本的页面纯文本展示，还可以同时保留两种方式——既弹窗提示，又把结果显示在页面上：

function showResults() {
  const correctAnswers = document.querySelectorAll('.answer.correct').length;
  const totalQuestions = 5;
  const resultText = `你答对了${correctAnswers}题，总分${totalQuestions}分`;
  
  // 弹窗展示
  alert(resultText);
  // 页面展示（保留原逻辑）
  document.getElementById('result-container').textContent = resultText;
}

这样改完之后，用户完成测验调用showResults()时，就会弹出alert显示结果啦，完全符合你的需求～

内容的提问来源于stack exchange，提问作者Antonio Andrés