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


};

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


};

• javascript
• html
• math

Share Improve this question Follow edited Feb 24, 2015 at 12:21 Ashley Medway 7,30977 gold badges5353 silver badges7373 bronze badges asked Feb 24, 2015 at 11:55 FairytalesFairytales 4522 silver badges77 bronze badges 2

• its not java code its javascript. Java and java script both are very different. – Krishna Verma Commented Feb 24, 2015 at 12:04
• @KrishnaVerma java script or JavaScript? – Ashley Medway Commented Feb 24, 2015 at 12:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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.

Compare answer to value in checkAnswer:

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

You don't update the value.

In the button click event update the value. JSFiddle.

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

    ...