我最近在上一篇文章中通过使用prompt（）获取用户输入，提出了这个简单的特性。从那时起，我提升了自己，使用HTML表单输入来达到类似的结果。我无法更新公式。我不知道我做错了什么。只是。。。
-随机产生两个介于1-10之间的数字…只工作一次
-用户输入答案并比较…有效
-统计总答案和正确答案…有效
-提供数字等级…工程
数学生成“getMath（）”不会在“result（）”结尾处重新运行，我不确定原因。
请随意在语法上打我一顿。
接下来，我将添加数字并更改操作以逐步增加难度级别。但一步一步。
提前感谢您的时间和洞察力。
var correct = 0,
wrong = 0,
ans,
firstnum = Math.floor(Math.random() * 10 + 1),
secondnum = Math.floor(Math.random() * 10 + 1),
total = firstnum + secondnum,
score,
input,
calc = "+";
function getMath() {
document.getElementById("firstnum").value = firstnum;
document.getElementById("secondnum").value = secondnum;
document.getElementById("calc").value = calc;
}
function getAnswer() {
var input = document.getElementById("userInput").value;
if (input == total) {
correct++;
} else {
wrong++;
}
result();
}
function result() {
score = correct + wrong;
percent = correct / score;
document.getElementById("score").innerHTML = score;
document.getElementById("ans").innerHTML = correct;
document.getElementById("percent").innerHTML = percent * 100;
getMath();
}<body onload="getMath()">
<h1>Math Test</h1>
<input type="text" id="firstnum"></input>
<input type="text" id="calc">
<input type="text" id="secondnum">
<hr>
<form id="form1" onsubmit="return false">
<input type="text" id="userInput" placeholder="" size="10">
<button onclick="getAnswer()">Submit Answer</button>
</form>
<p>Total Answered</p>
<p id="score"></p>
<p>Answered Correctly</p>
<p id="ans"></p>
<p>Your number grade</p>
<p id="percent">%</p>
</body>
</html>最佳答案
您的第二个getMath调用运行，但在页面上没有区别。该函数不选取新的随机值，而是重新显示已经存在的值。。。这些随机值只在脚本加载时生成一次。
所以把随机逻辑移到getMath里面。还要尽量避免使用太多全局变量。如果每次生成新的数学挑战时都要为按钮分配一个新的单击处理程序，那么实际上可以传递所有必需的变量，并将其余的变量声明为局部变量。从HTML部分删除onclick，并使用代码设置onclick。
当用户不应该更改其内容时，还可以将input元素更改为span元素。
以下是它的工作原理：
window.onload = () => getMath(0, 0);
function getMath(correct, wrong) {
var firstnum = Math.floor(Math.random()*10+1),
secondnum = Math.floor(Math.random()*10+1),
calc = "+",
total = firstnum+secondnum;
document.getElementById("firstnum").textContent = firstnum;
document.getElementById("secondnum").textContent = secondnum;
document.getElementById("calc").textContent = calc;
document.getElementById("userInput").value = "";
document.getElementById("btnAnswer").onclick = () => getAnswer(total, correct || 0, wrong || 0);
}
function getAnswer(total, correct, wrong){
var input = document.getElementById("userInput").value;
if (input == total){
correct++;
} else{
wrong++;
}
result(correct, wrong);
}
function result(correct, wrong){
var score = correct+wrong;
var percent = correct/score;
document.getElementById("score").innerHTML = score;
document.getElementById("ans").innerHTML = correct;
document.getElementById("percent").innerHTML = percent*100;
getMath(correct, wrong);
}<h1>Math Test</h1>
<span id="firstnum"> </span>
<span id="calc"> </span>
<span id="secondnum"> </span>
<hr>
<form id="form1" onsubmit="return false">
<input type="text" id="userInput" placeholder="" size="10">
<button id="btnAnswer">Submit Answer</button>
</form>
<p>Total Answered: <span id="score"></span></p>
<p>Answered Correctly: <span id="ans"></span></p>
<p>Your number grade: <span id="percent">%</span></p>