CODEWITHSUNDEEP
javascripthtmlintadditionvar
user3812394
user3812394

Reputation: 23

How can i add numbers to a variable in JS?

I have been trying to do a simple game where you try to get the right number as the random number. If you win, you get 1 point. But I wasn't able to give that point. Here is what i have done :

<html>
<head>
    <title>Luck Game</title>
    <script>
    function onClick(){
        var number = Math.floor(Math.random()*10);
        var usernumber = document.getElementById("input").value ;
        var points = 0;
        document.getElementById("Answer").innerHTML = number ;
        document.getElementById("points").innerHTML = "Points in your account : " + points;
        if(usernumber == number){
            document.getElementById("WIN?").innerHTML = "You WON !. You got 1 point added to your account !";
points = points + 1;

        }
        else{
            document.getElementById("WIN?").innerHTML = "Ow, no luck, you lost..."
        }

    }
    </script>
</head>
<body>
    <input id="input"></input>
    <p id="Answer"></p>
    <button onClick="onClick()"></button>
    <p id="WIN?"></p>
    <p id="points"></p>
</body>

But the "points = points + 1" is not working ! what is wrong ? please help me .

Upvotes: 2

Views: 316

Answers (3)

zucker
zucker

Reputation: 1112

Declare var points outside function:

var points = 0;

function onClick(){
    ...
}

Upvotes: 1

Tuğrul
Tuğrul

Reputation: 372

You should declare your var points outside click function. E.g : 

<script>
var points = 0;
    function onClick(){
        var number = Math.floor(Math.random()*10);
        var usernumber = document.getElementById("input").value ;

        document.getElementById("Answer").innerHTML = number ;
        document.getElementById("points").innerHTML = "Points in your account : " + points;
        if(usernumber == number){
            document.getElementById("WIN?").innerHTML = "You WON !. You got 1 point added to your account !";
points = points + 1;

        }
        else{
            document.getElementById("WIN?").innerHTML = "Ow, no luck, you lost..."
        }

    }
    </script>

So the counter will be saved somewhere else without being resetted everytime function procs.

Upvotes: 4

Erik Gillespie
Erik Gillespie

Reputation: 3959

The way you've written it, points is a variable local to the onClick() function so it will get reset to zero each time the function is called. If you pull the initialization of points out of onClick() then you will be able to safely increment its value:

<script>
    var points = 0;
    function onClick(){
        var number = Math.floor(Math.random()*10);
        var usernumber = document.getElementById("input").value ;

        document.getElementById("Answer").innerHTML = number ;
        document.getElementById("points").innerHTML = "Points in your account : " + points;
        if(usernumber == number){
            document.getElementById("WIN?").innerHTML = "You WON !. You got 1 point added to your account !";
            points++;
        } else {
            document.getElementById("WIN?").innerHTML = "Ow, no luck, you lost..."
        }
    }
</script>

Upvotes: 1

Related Questions