Variable deletes after a function is complete in Javascript

Question

HTML element:

<div style="text-align:center;";">
    <input style="align:center;" type="button" value="Roll" onClick='roll()';>
</div>

JavaScript snippet:

function roll(){
    document.getElementById('test5').innerHTML=roll;
    var roll;
    document.getElementById('test').innerHTML=roll;
    if (!(roll == 1 || roll == 2 || roll == 3)){
        document.getElementById('test1').innerHTML='inLoop';
        roll = 1;
    }
    //irrelavent code

    var dice1=dice[0];
    var dice2=dice[1];
    var dice3=dice[2];
    var dice4=dice[3];
    var dice5=dice[4];
    if (roll>=3){
        score(dice1, dice2, dice3, dice4, dice5);
    }
    roll = storeRoll(roll);
    document.getElementById('test4').innerHTML=roll;
};

function storeRoll(roll){
    ++roll
    document.getElementById('test2').innerHTML='inFunction';
    document.getElementById('test3').innerHTML=roll;
    return roll;
};

I am trying to make it so that if roll isn't defined yet, it will set it to 1 and at the end of the function it will add 1 to roll. Once there are 3 rolls, it calls the score function. In my trial and error it seemed that the roll variable was getting reset every time I restart the function. I do the function multiple times at user click on an HTML input button so a loop will not work. Every time I click on the button, the roll variable resets. I was wondering if there is something in my code that is resetting the variable roll.

Tip: Avoid using variables and functions with equal names, even with different capitalization. This can cause a lot of confusion. — Ricardo Souza, Apr 22 '13 at 02:18

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

Your roll variable is scoped to the function roll(). Each time the function is called, the variable is recreated. If you need to retain the value of roll, you need to scope it as global to the function. Suggested reading: What is the scope of variables in JavaScript?

There are many ways you can achieve this. All solutions except the simplest will require you to learn how Javascript works.

var timesRolled = 0;

function roll() {
    timesRolled++;
    document.getElementById('test3').innerHTML = timesRolled;

    var dice1=dice[0];
    var dice2=dice[1];
    var dice3=dice[2];
    var dice4=dice[3];
    var dice5=dice[4];

    if (timesRolled >= 3) {
        score(dice1, dice2, dice3, dice4, dice5);
    }
}

function score(){
    // presumably here you will reset the timesRolled to 0, so that another game may be played
}

I recommend you learn more about Javascript if you intend to program in it seriously.

https://developer.mozilla.org/en/learn/javascript

Good advice. The only thing I will complain about is the `if` statement that sould be `if (timesRolled >= 3)` instead of `if (roll >= 3)`. ;) — Ricardo Souza, Apr 22 '13 at 02:16
Thanks for the advice. It works great now. I will look into the link that you posted. — Dylan Vander Berg, Apr 23 '13 at 02:27

score 0 · Answer 2 · answered Apr 22 '13 at 02:27

Another problem is that your function's name roll is the same as the variable's name, roll.

I suggest doing this: using the "self" object as a prefix to the roll variable. Doing this for situations like yours is better than global variables which cause problems and errors if multiple scripts are loaded (even two versions of the same script). Also, the "self" object is better than the "top" or "window" object (etc.) because there is one "self" object for each frame in the case of multiple documents in an application.

function roll(){
    document.getElementById('test5').innerHTML=self.roll;

/* your variable declaration still leaves "roll" undefined, but just makes it a local variable; so you really don't need this second statement here */
    document.getElementById('test').innerHTML=self.roll;

    if (!(self.roll == 1 || self.roll == 2 || self.roll == 3)){
        document.getElementById('test1').innerHTML='inLoop';
/* this is when self.roll first gets initialized */
        self.roll = 1;
    }

your function continues as before, but all references to the variable roll should be changed to self.roll.

Variable deletes after a function is complete in Javascript

2 Answers2