jquery set counter within the function which is called by itself

Question

I try to make a counters of correct and incorrect given answers. The count happens within the if else construction after the user clicks on the button.

(function keerSom(){


//generate and put a random number between 1 and 10 
a = Math.floor((Math.random() * 10) + 1);
$(".a").html(a);

//get the variable b
b = $(".b").text().trim();

//get the cursor inside the input field and set the input field clean
userInputBox.focus();
$("#userAnswer").val("");


//make the calculations and check
next.click(function() {

$("form").submit(function( event ) {
event.preventDefault();
});

result = a*b;
userInput = $("#userAnswer").val();


//check if the answer was correct
if (result == userInput){
userInputBox.removeClass("incorrect");
userInputBox.addClass("correct");
//set count of correct 
correct++;
$("#correct").html(correct);

If the answer is correct I need to move on to the next task for the user (this means back to beginning of the function)

//go for anothe som
 setTimeout(function(){
 userInputBox.removeClass("correct");
 keerSom();
 }, 3000);
}else{
userInputBox.addClass("incorrect");
//set counter of incorrect
incorrect++;
$("#incorrect").html(incorrect);
userInputBox.focus();
}

});

})();

You can see what I'm trying to do here http://jsfiddle.net/pmjmny49/9/

The problem is that the counter works wrong. It counts in a progression, it adds not 1 but 2,then 4 and so on.

I cannot figure out what I'm doing wrong. Surely it is because of the calling back the function inside itself... but I don't see what can I do to make it work.

If someone can help, explain what's going on, I would really appreciate it!

Thanks in advance!

Answer 1

I would honestly separate the keerSom() function from the click handler as you are getting a recursion. Each time you click the next button the the function runs as many times as it has been applied to the button, which is a multiplier of how many times you've clicked the button. A separation of these two will prevent that from happening. DEMO

var a = 0;
var b = 0;
var correct = 0;
var incorrect = 0;

var userInputBox = $("#userAnswer");
var next = $("#next");

var keerSom = function () {

    //generate and put a random number between 1 and 10 
    a = Math.floor((Math.random() * 10) + 1);
    $(".a").html(a);

    //get the variable b
    b = $(".b").text().trim();

    //get the cursor inside the input field and set the input field clean
    userInputBox.focus();
    userInputBox.val("");

};

keerSom();
$("form").submit(function (event) {
    event.preventDefault();
});

next.click(function () {

    var result = a * b;
    var userInput = userInputBox.val();

    //check if the answer was correct
    if (result == userInput) {
        userInputBox.removeClass("incorrect");
        userInputBox.addClass("correct");

        //set count of correct 
        correct++;
        $("#correct").html(correct);

        //go for another
        setTimeout(function () {
            userInputBox.removeClass("correct");
            keerSom();
        }, 500);

    } else {
        userInputBox.addClass("incorrect");
        //set counter of incorrect
        incorrect++;
        $("#incorrect").html(incorrect);
        userInputBox.focus();
    }

});

Hope this helps! Let me know if you have any questions.