CODEWITHSUNDEEP
javascripthtmlmath
Fairytales
Fairytales

Reputation: 45

Try to create basic math game

I'm doing a math game. I have this HTML/JavaScript code. It generates a random number but when I input the correct answer, it still displays 'wrong'. I'm not sure what went wrong.

Here is HTML code:

<table width="400" border="1" align="center">
  <tr>
    <td><div id="number1">1</div></td>
    <td><div>+</div></td>
    <td><div id="number2">2</div></td>
    <td><div>=</div></td>
    <td><input type="text"></input></td>
    <td><input type="button" value="Check"></input></td>

  </tr>
</table>

Here is my JavaScript code:

//random number appear when start game
var number1;
var number2;

number1 = Math.floor((Math.random() * 10) + 1);
number2 = Math.floor((Math.random() * 10) + 1);
document.getElementById("number1").innerHTML=number1;
document.getElementById("number2").innerHTML=number2;

//Answer
var answer = number1 + number2;

//add click handler with check answer
var checkAnswer = document.querySelector('input[type=text]');
var value = checkAnswer.value;
var btn = document.querySelector('input[type=button][value=Check]');


btn.onclick = function() 
{
  if (value == answer) 
       {
          alert('You are correct');
       }
   else{
          alert('You are incorrect, the answer was ' + answer);
       }

 document.querySelector('input[type=text]').value = "";               
 document.getElementById('number1').innerHTML = "";
 document.getElementById('number2').innerHTML = ""; 
 number1 = Math.floor((Math.random() * 10) + 1);
 number2 = Math.floor((Math.random() * 10) + 1);
 document.getElementById('number1').innerHTML = number1; 
 document.getElementById('number2').innerHTML = number2;

 answer = number1 + number2


};

Upvotes: 2

Views: 4744

Answers (3)

Abhishek
Abhishek

Reputation: 7045

Move following lines in .onclick method.

var checkAnswer = document.querySelector('input[type=text]'); //needn't be moved in method
var value = checkAnswer.value;

You can verify the result from JSFiddle.

The problem was the variable value is initialize with empty string when you load the page, as when page is loaded the value is empty.

Upvotes: 2

johanthuresson
johanthuresson

Reputation: 580

Compare answer to value in checkAnswer:

if (checkAnswer.value == answer) { 
  //correct 
}else{
  //incorrect
}

Upvotes: 1

Ashley Medway
Ashley Medway

Reputation: 7301

You don't update the value.

In the button click event update the value. JSFiddle.

btn.onclick = function() 
{
    value = checkAnswer.value;

    ...

Upvotes: 1

Related Questions