Question

这有点难以解释，但我想这样做，当有人得到问题的答案时，他们会得到一个新问题。我曾多次尝试调用该函数，但这并不起作用。我尝试过很多东西，比如制作饼干，但我无法让它发挥作用。这是我目前的代码：

＆＃13;

//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();

＆＃13;

body {
  font-family: Arial;
}

div {
  padding-top: 50px;
  text-align: center;
}

＆＃13;

<!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>

＆＃13;

Answer 1

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

您也希望从那里设置question()值（但将ans保留为全局变量，以便可以从其他函数中检查）：

ans

在上下文中：

＆＃13;
＆＃13;
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; }
＆＃13;
//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();
＆＃13;
body { font-family: Arial; } div { padding-top: 50px; text-align: center; }
＆＃13;
＆＃13;
＆＃13;

此外，您可能想要移动以下行：

<!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;陈述之前，因为目前它并没有计算所尝试的问题，它只计算正确回答的问题。

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

1 个答案: