CODEWITHSUNDEEP
javascriptfunction
SteveS
SteveS

Reputation: 69

JavaScript Functions - Calling from the same script

I have 1 script containing 3 functions. I have an issue were the confirmAnswer() function doesn't call the random() function.

<body>

<p>Get the random numbers...</p>
<button type="button" onclick="random()">Click Me!</button>
<p id="start"></p>

<p>Get the input...</p>
<p>Your answer is: <input type="text" id="textBox" value="">&nbsp;</p>
<p id="textbox"></p>

<p>Get the answer...</p>
<button type="button" onclick="checkAnswer()">Click Me!</button>
<p id="checker"></p>

<p>Check the answer...</p>
<button type="button" onclick="confirmAnswer()">Check Answer!</button>
<p id="checkerChecker"></p>

<script>
var number1 = Math.floor((Math.random() * 12) + 1);
var number2 = Math.floor((Math.random() * 12) + 1);
var total = number1 * number2;

function random() {
  document.getElementById("start").innerHTML = number1 + " x " + number2;
}  

function checkAnswer() {
  document.getElementById("checker").innerHTML = total;
} 

function confirmAnswer() {
    var answer = document.getElementById("textBox").value;
    var theResult;
if (answer == total) {
  theResult = "Yes, that is correct.";
  random();
  } else {
  theResult ="No, that isn't correct.";
  }
  document.getElementById("checkerChecker").innerHTML = theResult;
  }
</script>
</body>

I have used this function before, maybe it isn't the correct syntax to the original (below). Could anyone help me out?

<script>
function checkAnswer() {
    var answer = document.getElementById("textBox").value;
    var theResult;
    
    if (answer == total) {
        theResult = "Yes, that is correct.";    
        random();
    } else {
        theResult = "No, it's the wrong answer.";
        clr();
    }
    document.getElementById("checker").innerHTML = theResult;
}
</script>

The only difference I can see between both is the 2nd piece of code invokes the random() function from another script.

Upvotes: 1

Views: 117

Answers (3)

phhu
phhu

Reputation: 1992

The issue here isn't that random() isn't running, but that it doesn't change the values of number1 and number2. You can see this by adding a console.log to the random function to show that it does run.

You could fix this by making method to rerandomise the numbers, like the below. It's also useful to use a function to calculate the total dynamically, to save having to update the total variable.

var number1;
var number2;

function randomiseNumbers()
{
    number1 = Math.floor((Math.random() * 12) + 1);
    number2 = Math.floor((Math.random() * 12) + 1);
}

randomiseNumbers();
function total(){return  number1 * number2;}

function random() 
{
  console.log("running random");
  randomiseNumbers();
  document.getElementById("start").innerHTML = number1 + " x " + number2;
}  

function checkAnswer() 
{
  document.getElementById("checker").innerHTML =  total();
} 

function confirmAnswer() 
{
    var answer = document.getElementById("textBox").value;
    var theResult;
    if (answer ==  total()) 
    {
      theResult = "Yes, that is correct.";
      random();
    } 
    else 
    {
      theResult ="No, that isn't correct.";
    }
      document.getElementById("checkerChecker").innerHTML = theResult;
}
<body>

<p>Get the random numbers...</p>
<button type="button" onclick="random()">Click Me!</button>
<p id="start"></p>

<p>Get the input...</p>
<p>Your answer is: <input type="text" id="textBox" value="">&nbsp;</p>
<p id="textbox"></p>

<p>Get the answer...</p>
<button type="button" onclick="checkAnswer()">Click Me!</button>
<p id="checker"></p>

<p>Check the answer...</p>
<button type="button" onclick="confirmAnswer()">Check Answer!</button>
<p id="checkerChecker"></p>
</body>

Upvotes: 2

Mr. Innovator
Mr. Innovator

Reputation: 95

When you call the random function, you should also call a funtion that randomizes the variables number1 and number2 and stores the value of the number1 number2 to total,

Upvotes: 1

hgb123
hgb123

Reputation: 14901

It does call, to make sure, please set an alert() in your random(). The problem lies in your logic. Below changes could help you

<body>
  <p>Get the random numbers...</p>
  <button type="button" onclick="random()">Click Me!</button>
  <p id="start"></p>

  <p>Get the input...</p>
  <p>Your answer is: <input type="text" id="textBox" value="" />&nbsp;</p>
  <p id="textbox"></p>

  <p>Get the answer...</p>
  <button type="button" onclick="checkAnswer()">Click Me!</button>
  <p id="checker"></p>

  <p>Check the answer...</p>
  <button type="button" onclick="confirmAnswer()">Check Answer!</button>
  <p id="checkerChecker"></p>

  <script>
    var number1, number2, total;

    function random() {
      number1 = Math.floor(Math.random() * 12 + 1);
      number2 = Math.floor(Math.random() * 12 + 1);
      document.getElementById("start").innerHTML = number1 + " x " + number2;
      alert("asdasd");
    }

    function checkAnswer() {
      total = number1 * number2;
      document.getElementById("checker").innerHTML = total;
    }

    function confirmAnswer() {
      var answer = document.getElementById("textBox").value;
      var theResult;
      if (answer == total) {
        theResult = "Yes, that is correct.";
        random();
      } else {
        theResult = "No, that isn't correct.";
      }
      document.getElementById("checkerChecker").innerHTML = theResult;
    }
  </script>
</body>

Upvotes: 2

Related Questions