CODEWITHSUNDEEP
javascript
David Trinh
David Trinh

Reputation: 289

Increment Score Using JavaScript

I am pretty new to JavaScript so this question might be easy to most of you pros.

I am trying to have the score incremented by 10 if the reaction time is less than 1 second and anything slower than 1 second the score will increment to 5.

For some reason, the score will not increment it will just stay 10 if it is under 1 second or stay at 5 if it is over 1 second.

Any assistance will be grateful!

Here is my JSFiddle for the problem I am having: https://jsfiddle.net/dtrinh888/aftyomdv/`var score = 0;

        if (reactionTime < 1) {

            document.getElementById("score").innerHTML = score+=10;

        }

        else {

            document.getElementById("score").innerHTML = score+=5;

        }

Upvotes: 2

Views: 5597

Answers (2)

jfriend00
jfriend00

Reputation: 707326

You keep resetting the score to 0 every time because it's a local variable that you initialize over and over. If you want the score to accumulate, then you must declare score in a higher level scope so its value can continue from one event to the next and only initialize it once in that higher scope, not in each event.

See a modified version of your jsFiddle here: https://jsfiddle.net/jfriend00/qoju2z7g/

I moved the definition of:

var score = 0;

to a higher scope so the value survives from one event to the next.

In your code:

document.getElementById("box").onclick = function() {
    clickedTime = Date.now();
    reactionTime = (clickedTime - createdTime) / 1000;
    document.getElementById("box").style.backgroundColor = getRandomColor();
    document.getElementById("box").style.display = "none";
    document.getElementById("time").innerHTML = reactionTime + " seconds!";

    var score = 0;
    if (reactionTime < 1) {
        score += 10;
        document.getElementById("score").innerHTML = score;
    } else {
        score += 5;
        document.getElementById("score").innerHTML = score;
    }

    makeBox();
}

You can see that the variable score is a local variable. It is initialized to 0 every time the click handler is called and then you increment it and it's only local to each separate invocation of the click handler so it is recreated each time, initialized to 0 each time, incremented by 5 or 10 and then thrown away each time. So, no surprise, it only ever has a value of 5 or 10.

Moving the definition and initialization of that variable to a higher scope that persists from one client event to the next allows it to accumulate a value from one click to the next.

Upvotes: 4

Leakim
Leakim

Reputation: 616

You reinitialize the score variable and reset it to zero every time you want to increment it. You have two choices here:

  1. Getting the previous set score from the DOM-element every time. F.ex like this var score = parseInt(document.getElementById("score").innerHTML);
  2. Declaring score at a higher level (outside the click-event function for the box). This is probably the cleanest solution.

Upvotes: 0

Related Questions