Jordan Baron Jordan Baron - 3 months ago 10
Javascript Question

JavaScript - Calling a function again is not working

This is kind of hard to explain, but I want to make it so when someone gets the answer right to a question, they get a new question. I have tried calling the function more than once but that doesn't work. I have tried many things like making cookies, but I can't get it to work. Here is my current code:



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




Answer

The code that generates the two random numbers is currently not inside a function, so it runs once when the page first loads. You just need to move those lines inside your question() function, so then each time question() is called you'll get new random values.

You'll want to set the ans value from there too (but leave ans as a global variable so that it can be checked from your other function):

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;
}

In context:

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

Also, you may want to move the following lines:

questionNumber++;
quesNum.innerHTML = questionNumber;

...to be before the if statement, because at the moment it doesn't count questions attempted, it counts only questions that were answered correctly.