variable doesn't update when function restarts (javascript)

Question

I'm going to try my best to ask this question without a huge wall of code. Basically I have written a very simple math quiz game. In this game you select a difficulty, the number of questions you want, and the game starts. It asks that number of questions and then you get a score and then the game is over. However, you can restart the game. When you restart, it simply returns you to the home screen, then you can select your options again. The only problem is, we need to keep track of the number of questions remaining in the quiz, the first time around, it works well. We pass numQuestions to the game function. The second time, however, even if I pass numQuestions=10, the value remains 0 from the first time I played the game. Here is the game function:

function startGame(difficulty,numQuestions,score){

    // begins game, excluded that come its just some acsii art

        // asks question
        var q = new question(difficulty);
        $("#gameInside").html(q.string);
        $("#gameInside").data('answer',q.answer);
            // gives answer options
        for (var ii=0;ii<=3;ii++){
            $("#answers").append("<button class='answerButton'>"+q.answerArray[ii]+"</button>")
        }
            // starts timer
        var b = document.getElementById("timer");
        timer = new stopWatch(b, {delay: 100});
        timer.start();


    },5500)
    // when answer is clicked, go here
    $("#gameScreen").on("click",".answerButton",function() {
        // this seems to be the problem: on the second time I play the game, numQuestions remains the value from the first game and continues to go down (-1,-2) and since my selector is (>0), the else statement fires.
        numQuestions--;

        var time = parseFloat($("#timer span").html());
        var correct = parseFloat($("#gameInside").data('answer'));
        var userAnswer = parseFloat($(this).html());

        if (correct==userAnswer)
            tempScore = Math.round(calculateScore(time)*100)/100;
        else
            tempScore = 0;

        score += tempScore;
        $("#score").html(Math.round(score*100)/100);

        if (numQuestions > 0) {


            var q = new question(difficulty);
            $("#gameInside").html(q.string);
            $("#gameInside").data('answer',q.answer);
            $("#answers").empty();

            for (var ii=0;ii<=3;ii++){
                $("#answers").append("<button class='answerButton'>"+q.answerArray[ii]+"</button>")
            }
            timer.reset();

        } else {

            $("#answers").empty();
            $("#gameInside").html('Game Over! Thanks for Playing!');
            timer.stop();

        }

    });

}

any ideas? Thanks

edit:

$(".numberQButton").click(function(){
        numQuestions = parseFloat($(this).html());
        $("#numQuestionsScreen").hide();
        $("#gameScreen").show();
        $("#score").html(0);
        startGame(difficulty,numQuestions,score);
});

Where are you calling startGame? Where is your numQuestions defined? — AbhinavRanjan, Dec 24 '13 at 20:29
edited: It seems like after one game, it begins to fire both correctly and incorrectly, as if there are two versions of the variable... I screwed something up — Sam Creamer, Dec 24 '13 at 20:31
Can you also include the basic html structure? This will help troubleshoot. — Travis J, Dec 24 '13 at 20:40

score 1 · Answer 1 · answered Dec 24 '13 at 20:33

1

It sounds like you need to instantiate a new Game object when the game is restarted.

answered Dec 24 '13 at 20:33

Neil Girardi

4,533
1
28
45

score 1 · Accepted Answer · edited May 23 '17 at 12:03

You're problem (I think) lies in closures. When you declare a function in javascript, any accessing of a variable from outside it's own scope generates what is called a closure. In this case, numQuestions is accessed from inside your event function, creating a closure. The effect of this is that any accessing of the variable numQuestions inside your event functions references the variable as it was from the moment your javascript interpreter came across the event function itself- ie, the first time you play your game.

Have a look at these to get an idea of where it's going wrong.

I see, this is certainly the problem. I have some studying to do — Sam Creamer, Dec 24 '13 at 21:51

score 1 · Answer 3 · answered Dec 24 '13 at 20:34

1

Where do you define the on click listener? If it triggers two times, it seems like you are defining the on click listener in such way, that after you completed one game and start all over, a new listener will be registered so you got 2 in the end.

answered Dec 24 '13 at 20:34

CharlyDelta

938
11
31

variable doesn't update when function restarts (javascript)

3 Answers3