CODEWITHSUNDEEP
javascriptvalidationmathaddition
ColonelStroganoff
ColonelStroganoff

Reputation: 27

js math answer validation

I am trying to generate a random addition problem that the user is to answer. I have the random numbers generated, but am having difficulty taking the user's answer and validating it. Please help! My code is below:

js: function randomNum() { var num1 = document.getElementById("num1"); var num2 = document.getElementById("num2"); num1.innerHTML = Math.floor((Math.random() * 50) + 1); num2.innerHTML = Math.floor((Math.random() * 50) + 1);

function checkMath() {
    var num1 = parseInt((document.getElementById("num1")), 10);
    var num2 = parseInt((document.getElementById("num2")), 10);
    ans = document.forms.problem.answer;
    ans.value = num1 + num2;
    if (ans == correct) {
        alert("woot");
    } else {
        alert("nope");
    }
}

}

html:

<body onLoad="randomNum();">
<table>
<tr>
<td>
<div id="problem">
<div>
<p id="num1">00</p>
<div class="plus">+</div>
<p id="num2">00</p>
<hr>
<form id="problem"><p><input id="answer" value=""></p>
<input type="button" onclick="checkMath();" value="Check Answer"></form>
</div>
</div>
</td>

Upvotes: 2

Views: 3031

Answers (2)

Rick Deckard
Rick Deckard

Reputation: 1369

There are several problems with your code.

First, you are not actually checking the answer's value, you are replacing it.

Second, you are using a DOM element as your argument to parseInt, instead of a string (you were missing an innerHTML).

The correct javascript should be:

function randomNum() {
    var num1 = document.getElementById("num1");
    var num2 = document.getElementById("num2");
    num1.innerHTML = Math.floor(Math.random()*50+1);
    num2.innerHTML = Math.floor(Math.random()*50+1);
}

function checkMath() {
    var num1 = parseInt(document.getElementById("num1").innerHTML, 10);
    var num2 = parseInt(document.getElementById("num2").innerHTML, 10);
    var answer = parseInt(document.getElementById("answer").value, 10);
    if (answer === num1 + num2) {
        alert("woot");
    } else {
        alert(answer + " is incorrect, correct answer is " + (num1+ num2));
    }
    document.getElementById("answer").value="";
    randomNum();
}

I created a jsfiddle for you, check here: http://jsfiddle.net/883fF/

Your HTML was a bit off two, for instance, you open the table tag, but you never close it, etc. I hope that helps.

Upvotes: 1

Fauxsaurus
Fauxsaurus

Reputation: 520

Code looks good but you forgot to close your JS functions.

function randomNum() {
var num1=document.getElementById("num1");
var num2=document.getElementById("num2");
num1.innerHTML=Math.floor((Math.random()*50)+1);
num2.innerHTML=Math.floor((Math.random()*50)+1);
}

function checkMath() {
var num1=new Number(document.getElementById("num1").innerHTML);
var num2=new Number(document.getElementById("num2").innerHTML);
ans=document.getElementById("answer").value;
   if (ans==(num1+num2))
   {
       alert('Woot!');
   }

   else
   {
       alert('Nope');
   }
}

Upvotes: 0

Related Questions