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

• 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

3 Answers 3

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;

    ...