How can I keep track of correct answers using javascript?

Question

I have a simple Javascript Math program. It lets you answer equations and when it checks your answer it alerts whether you answered correctly or wrongly.

Here is the code for addition:

function randomAdd()
        {
            var x=document.getElementById("AddN1");
            x.value=Math.floor((Math.random()*12)+1);

            var y=document.getElementById("AddN2");
            y.value=Math.floor((Math.random()*12)+1);
        }

        function checkAdd()
        {
            var z=document.getElementById("AddA2");
            z.value= parseInt(document.getElementById("AddN1").value) + parseInt(document.getElementById("AddN2").value);


            if(parseInt(document.getElementById("AddA1").value)==z.value)
            {
                score=score+1;
                alert("Addition: Correct");
            }
            else
            {
                alert("Addition: Incorrect");
            }
        }
<form name="Addition">
        <table>
            <tr>
                <th>Addition</th> <th></th> <th></th> <th></th> <th></th> <th></th>
            </tr>
            <tr>
                <th>Number 1</th> <th></th> <th>Number 2</th> <th></th> <th>Type Your Answer</th> <th>Correct Answer</th>
            </tr>
            <tr>
                <td><input type="text" name="AddN1" id="AddN1"></td> <td>+</td> <td><input type="text" name="AddN2" id="AddN2"></td> <td>=</td> <td><input type="text" name="AddA1" id="AddA1"></td> <td><input type="text" name="AddA2" id="AddA2"></td>
            </tr>
            <tr>
                <td><input type="button" value="Get Numbers" onclick="randomAdd();"> <td></td> <td></td> <td></td> <td><input type="button" value="Check Answer" onclick="checkAdd();"> <th></th>
            </tr>
        </table>
</form>

The code was provided to me by my college. I would like to keep a simple counter that will count all the correct answers the user gets and also a reset button that would reset the counter back to zero?

Sorry if this sounds really basic but I have no experience with Javascript.

Thanks.

Answer 1

I haven't tested but I suspect that your code works by default almost but only problem is that you are not declaring your score variable in the global scope, that way the same variable can be accessed by other functions without further passing.

Adding var score = 0; to top of page should make it work and later use it without var like score++; to increase by one, score = 0; to reset it and so on.. Rest of the code I leave you as a puzzle, since its school work anyway - just wanted to en-light you about usage of global variables. :) However try to avoid creating lots of global variables because it is also known as bad practice, although its sometimes hard to live without them. Read more from global variables, bad practice?

Few debugging tips for your code:

var scoreElement=document.getElementById("score");

This line is executed before DOM is loaded, so it might be null.. Try to change lines:

alert("Addition: Correct");
scoreElement.value=score;

To

document.getElementById("score").value=score;

Also move all of your javascript to bottom of page (for example under: </body> tag) - thats the right way to do it. Also why you are loading jquery.js when you are not really using it? For example you could add all your javascript code to inside document ready. Like this:

$(function() {

    // your javascript code

});

Answer 2

you just need to declare the variable score like this outside the function checkAdd() {}

var score=0;

then it alerts also correct or incorrect, after you can display the score sorry, now I added the resetScore function

<form name="Addition">
        <table>
            <tr>
                <th>Addition</th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Number 1</th>
                <th></th>
                <th>Number 2</th>
                <th></th>
                <th>Type Your Answer</th>
                <th>Correct Answer</th>
                <th>SCORE</th>
            </tr>
            <tr>
                <td>
                    <input type="text" name="AddN1" id="AddN1">
                </td>
                <td>+</td>
                <td>
                    <input type="text" name="AddN2" id="AddN2">
                </td>
                <td>=</td>
                <td>
                    <input type="text" name="AddA1" id="AddA1">
                </td>
                <td>
                    <input type="text" name="AddA2" id="AddA2">
                </td>
                <td>
                    <input type="text" name="score" id="score" value="0" readonly>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Get Numbers" onclick="randomAdd();">
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <input type="button" value="Check Answer" onclick="checkAdd();">
                </td>
                <td></td>
                <td>
                    <input type="button" value="Reset Score" onclick="resetScore();">
                </td>
            </tr>
        </table>
</form>
<script type="text/javascript">
var score=0;
function resetScore()
{   
    score=0;
    document.getElementById("score").value=score;
}
function randomAdd()
        {
            var x=document.getElementById("AddN1");
            x.value=Math.floor((Math.random()*12)+1);

            var y=document.getElementById("AddN2");
            y.value=Math.floor((Math.random()*12)+1);
        }


        function checkAdd()
        {
            var z=document.getElementById("AddA2");
            z.value= parseInt(document.getElementById("AddN1").value) + parseInt(document.getElementById("AddN2").value);

            if(parseInt(document.getElementById("AddA1").value)==z.value)
            {
                //score=score+1;
                score++;
                alert("Addition: Correct");
                document.getElementById("score").value=score;
            }
            else
            {   
                //score=score-1;
                score--;
                alert("Addition: Incorrect");
                document.getElementById("score").value=score;
            }
        }

</script>