Increment Score Using JavaScript

Question

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;

        }

jfriend00 · Accepted Answer · 2015-03-13 00:40:49Z

4

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.

edited Mar 13, 2015 at 0:40

answered Mar 13, 2015 at 0:35

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Trinh Over a year ago

It worked!!! I tried everything besides doing that, feeling like such a dummy. Thank you so much for replying so fast. I knew one of you pros would have figured it out!

jfriend00 Over a year ago

@DavidTrinh - since it looks like you may be new here at StackOverflow, do you know that when you get your question answered, you should select the best answer by clicking the green checkmark to the left of it. That will indicate to the community that your question has been answered and will also earn both you and the person who provided the answer some reputation points on StackOverflow. Later, after you've earned some more reputation points, you can upvote all helpful answers too by clicking the up arrow next to each answer that proved helpful.

David Trinh Over a year ago

thanks for the heads up. I went ahead and clicked the checkmark. Sorry for being such a noob lol. Thanks again for the answer!

Leakim · Accepted Answer · 2015-03-13 00:40:37Z

0

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

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

answered Mar 13, 2015 at 0:40

Leakim

6161 gold badge10 silver badges19 bronze badges

Collectives™ on Stack Overflow

Increment Score Using JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related