gpt4 book ai didi

JavaScript - 再次调用函数不起作用

转载 作者:行者123 更新时间:2023-12-03 06:14:41 24 4
gpt4 key购买 nike

这有点难以解释,但我想让当有人得到问题的正确答案时,他们会得到一个新问题。我多次尝试调用该函数,但不起作用。我尝试过很多事情,比如制作 cookies ,但我无法让它发挥作用。这是我当前的代码:

//Getting elements
var ques = document.getElementById("question");
var ansBox = document.getElementById("ansBox");
var submitBtn = document.getElementById("submitBtn");
var isCorrect = document.getElementById("isCorrect");
var quesNum = document.getElementById("quesNum");

//Variables
var num1 = Math.floor((Math.random() * 10) + 1);
var num2 = Math.floor((Math.random() * 10) + 1);
var ans = num1 + num2;
var questionNumber = 1;

quesNum.innerHTML = questionNumber;

//Check if answer is correct or not
function checkAns() {
if(ansBox.value == ans) {
isCorrect.innerHTML = "Good job! Your answer was correct!";
questionNumber++;
quesNum.innerHTML = questionNumber;
ques.innerHTML = " ";
question();
//Call if statement when questionNumber = 10 and disable submitBtn and ansBox
if(questionNumber == 10) {
isCorrect.innerHTML = "Congratulations! You have completed all 10 questions! Refresh the page to do more!";
ansBox.disabled = true;
submitBtn.disabled = true;
}
} else {
isCorrect.innerHTML = "Uh-oh, your answer was incorrect!";
}
}

//Ask question
function question() {
ques.innerHTML = num1 + " + " + num2;
}

//Call question function
question();
body {
font-family: Arial;
}

div {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>

<div>
<h1>Edu Game One</h1>
<h3 id="question"></h3>
<input type="text" id="ansBox" />
<button id="submitBtn" type="submit" onclick="checkAns()">Submit</button>
<p id="isCorrect"></p>
<span id="quesNum"></span>
<span>/ 10</span>
</div>

<script src="scripts.js"></script>
</body>
</html>

最佳答案

生成两个随机数的代码当前不在函数内部,因此它在页面首次加载时运行一次。您只需将这些行移动到您的 question() 函数内部,这样每次调用 question() 时您都会获得新的随机数值。

您也需要从那里设置 ans 值(但将 ans 保留为全局变量,以便可以从其他函数中检查它):

function question() {
var num1 = Math.floor((Math.random() * 10) + 1);
var num2 = Math.floor((Math.random() * 10) + 1);
ans = num1 + num2;

ques.innerHTML = num1 + " + " + num2;
}

在上下文中:

//Getting elements
var ques = document.getElementById("question");
var ansBox = document.getElementById("ansBox");
var submitBtn = document.getElementById("submitBtn");
var isCorrect = document.getElementById("isCorrect");
var quesNum = document.getElementById("quesNum");

//Variables
var ans;
var questionNumber = 1;

quesNum.innerHTML = questionNumber;

//Check if answer is correct or not
function checkAns() {
if(ansBox.value == ans) {
isCorrect.innerHTML = "Good job! Your answer was correct!";
questionNumber++;
quesNum.innerHTML = questionNumber;
ques.innerHTML = " ";
question();
//Call if statement when questionNumber = 10 and disable submitBtn and ansBox
if(questionNumber == 10) {
isCorrect.innerHTML = "Congratulations! You have completed all 10 questions! Refresh the page to do more!";
ansBox.disabled = true;
submitBtn.disabled = true;
}
} else {
isCorrect.innerHTML = "Uh-oh, your answer was incorrect!";
}
}

//Ask question
function question() {
var num1 = Math.floor((Math.random() * 10) + 1);
var num2 = Math.floor((Math.random() * 10) + 1);
ans = num1 + num2;

ques.innerHTML = num1 + " + " + num2;
}

//Call question function
question();
body {
font-family: Arial;
}

div {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>

<div>
<h1>Edu Game One</h1>
<h3 id="question"></h3>
<input type="text" id="ansBox" />
<button id="submitBtn" type="submit" onclick="checkAns()">Submit</button>
<p id="isCorrect"></p>
<span id="quesNum"></span>
<span>/ 10</span>
</div>

<script src="scripts.js"></script>
</body>
</html>

此外,您可能需要移动以下行:

questionNumber++;
quesNum.innerHTML = questionNumber;

...位于 if 语句之前,因为目前它不计算尝试的问题,只计算正确回答的问题。

关于JavaScript - 再次调用函数不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39156868/

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