gpt4 book ai didi

javascript - 如何通过在javascript中调用函数来重复一个过程

转载 作者:行者123 更新时间:2023-11-27 22:59:11 25 4
gpt4 key购买 nike

我最近在上一篇文章中通过使用 prompt() 获取用户输入提出了这个简单的功能。从那时起,我提升了自己使用 HTML 表单输入来达到类似结果的目的。我无法刷新等式。我不确定我做错了什么。简直……

-随机生成两个介于 1-10 之间的数字...只工作一次

-用户输入答案并比较...有效

-计算总答案和正确答案...有效

-提供数字等级...作品

数学生成“getMath()”不会在“result()”结束时重新运行,我不确定为什么。

请随意在语法上打败我。

展望 future ,我将添加数字并更改操作以逐步增加难度级别。但一步一个脚印。

预先感谢您的宝贵时间和见解。

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>

关于javascript - 如何通过在javascript中调用函数来重复一个过程,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53472712/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com