JavaScript Functions - Calling from the same script

Question

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.

It's calling, successfully.

Shahnawaz Hossan
– Shahnawaz Hossan

2020-07-08 11:01:05 +00:00
Commented Jul 8, 2020 at 11:01 — Shahnawaz Hossan
– Shahnawaz Hossan, Commented Jul 8, 2020 at 11:01
Could you add this code into the snippet please?

Shahnawaz Hossan
– Shahnawaz Hossan

2020-07-08 11:01:39 +00:00
Commented Jul 8, 2020 at 11:01 — Shahnawaz Hossan
– Shahnawaz Hossan, Commented Jul 8, 2020 at 11:01

Maestro · Accepted Answer · 2020-07-08 11:10:31Z

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>

hgb123 · Accepted Answer · 2020-07-08 11:07:24Z

2

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>

edited Jul 8, 2020 at 11:07

answered Jul 8, 2020 at 11:02

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

1 Comment

SteveS Over a year ago

Thanks for the advice hgb123. The code itself still fails to work properly but I upvoted the answer as using an alert() is a very useful tool to help future me. e.g. I thought my function was failing but it was something else.

Mr. Innovator · Accepted Answer · 2020-07-08 11:09:50Z

1

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,

answered Jul 8, 2020 at 11:09

Mr. Innovator

851 silver badge6 bronze badges

Collectives™ on Stack Overflow

JavaScript Functions - Calling from the same script

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related