我最近在上一篇文章中通过使用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("one_answers").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="one_answers"></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("one_answers").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="one_answers"></span></p>
<p>Your number grade: <span id="percent">%</span></p>没有得到第二轮数字的原因是生成随机数的代码不在getMath()函数内。当页面第一次加载时，随机数代码只运行一次。
除此之外，你还有很多多余/不需要的代码(即，只要我们知道问了多少问题，你答对了多少，就没有必要跟踪有多少错误答案(，而且你的许多变量的名称不能准确地表达它们所包含的内容。
将其全部清理干净，可以减少代码量和复杂性。
请参阅内联注释以了解所做的更改：
// Do all your event binding in JavaScript, not with inline HTML event attributes:
window.addEventListener("DOMContentLoaded", populate);
document.querySelector("button").addEventListener("click", result);
// Declare and initialize all your variables.
var correct = 0;
var numQuestions = null;
var total = null;
var calc = "+";
// Get your DOM references just once and set your variable
// to the element itself, not a property of the element so
// that if you ever want to get a different property, you
// already have the DOM reference.
var firstNumElement = document.getElementById("firstnum");
var secondNumElement = document.getElementById("secondnum");
var calcElement = document.getElementById("calc");
var input = document.getElementById("userInput")
var numCorrectElement = document.getElementById("score");
var numQuestionsElement = document.getElementById("one_answers");
var percentElement = document.getElementById("percent");
function populate() {
// You need to generate new randoms after each successful guess
// so these lines need to be in a function that will be called again
firstNumElement.textContent = Math.floor(Math.random() * 10 + 1);
secondNumElement.textContent = Math.floor(Math.random() * 10 + 1);
calcElement.textContent = calc;
// prepending a "+" in front of the textContent converts it to a number
total = +firstNumElement.textContent + +secondNumElement.textContent;
numQuestions++; // Update how many questions have been asked
input.value = ""; // reset the user input
}
function result(){
// The getAnswer function should just be part of this function.
// We have a simple if/then here, so the JavaScript ternary syntax is easier:
correct = input.value == total ? correct + 1 : correct;
// Only use .innerHTML when the string has HTML in it that needs to be parsed.
// If not, use .textContent - it's faster and safer.
numCorrectElement.textContent = correct;
numQuestionsElement.textContent = numQuestions;
percentElement.textContent = (correct / numQuestions * 100).toFixed(2) + "%";
populate(); // Generate new randoms and update the page
}<h1>Math Test</h1>
<!--
input elements don't have a closing tag
also, use type=number for numeric input
But here, since users won't be interacting
with this data, don't even use form fields.
-->
<span id="firstnum"></span>
<span type="text" id="calc"></span>
<span type="number" id="secondnum"></span>
<hr>
<!-- You're not submitting data anywhere, so you don't need a form element -->
<input type="number" id="userInput" size="10">
<button type="button">Submit Answer</button>
<p>Total Questions: <span id="one_answers"></span></p>
<p>Answered Correctly: <span id="score"></span></p>
<p>Your number grade: <span id="percent"></span></p>