乘法练习网站：如何获取HTML按钮触发的JS函数返回值并显示

嘿，我来帮你搞定这个问题！你现在的核心问题是：虽然你调用了validateAnswer函数，但没有把它的返回值用来更新页面上的标题元素——函数返回的correct或incorrect不会自动显示，得你主动把它放到指定的<h2>里才行。

问题分析 #

1. 你的按钮点击事件只是调用了函数，但没有处理它的返回值，导致结果“无处可去”
2. 还有个小细节：HTML里没有type="integer"的输入框，应该用type="number"来确保用户输入数字

解决方案 #

我给你两种简单的实现方式，选哪种都可以：

方式1：直接在按钮点击时处理返回值

修改按钮的onclick事件，把函数返回的结果直接赋值给目标标题的内容：

<button onclick="document.getElementById('validateAnswer').innerHTML = validateAnswer(num1, num2);" id="submit">Submit</button>

同时，记得给input修正类型：

<input type="number" id="userAnswer">

方式2：让函数内部直接更新页面（更直观）

把结果显示的逻辑放到validateAnswer函数里，这样函数不需要返回值，调用后直接更新页面：

function validateAnswer(num1, num2) {
  var realAnswer = num1 * num2;
  // 把用户输入转成整数，避免字符串和数字比较的类型问题
  var userAnswer = parseInt(document.getElementById('userAnswer').value);
  var resultText = '';
  
  if (realAnswer === userAnswer) {
    resultText = 'correct';
  } else {
    resultText = 'incorrect';
  }
  
  // 直接把结果放到指定的h2里
  document.getElementById('validateAnswer').innerHTML = resultText;
}

对应的按钮点击事件保持不变就行：

<button onclick="validateAnswer(num1, num2);" id="submit">Submit</button>

完整修改后的代码示例 #

<h1>Multiplication Practice</h1>
<div class="equation">
  <h2 id="num1" class="num1multiply"></h2>
  <span class="multiplicationSign">&#215;</span>
  <h2 id="num2" class="num2multiply"></h2>
</div>
<br>
<input type="number" id="userAnswer">
<button onclick="validateAnswer(num1, num2);" id="submit">Submit</button>
<br>
<h2 id="validateAnswer"></h2>
<br>
<br>
<a class="back" href="main.html">back</a>

<script>
// 获取随机整数
var num1 = Math.floor(Math.random() * (14 - 7 + 1) ) + 7;
var num2 = Math.floor(Math.random() * (14 - 7 + 1) ) + 7;
var userAnswer = 0 

document.getElementById('num1').innerHTML = num1;
document.getElementById('num2').innerHTML = num2;

function validateAnswer(num1, num2) {
  var realAnswer = num1 * num2;
  var userAnswer = parseInt(document.getElementById('userAnswer').value);
  var resultText = realAnswer === userAnswer ? 'correct' : 'incorrect';
  document.getElementById('validateAnswer').innerHTML = resultText;
}
</script>

这样修改后，用户点击提交按钮时，结果就会显示在id为validateAnswer的<h2>里啦！

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