JavaScript: Error - variable already defined? Why?

I'm using the awesome JSLint tool to ensure my JavaScr开发者_Python百科ipt is "strict".

When I use it however, I get the following errors:

'hexRed', 'hexGreen', 'hexBlue', 'color' are already defined (referring to the "else if" clause)

My code is below. Any ideas how to fix my code to make it JavaScript "strict"?

function fade(currentStep, numSteps, currentRed, currentGreen, currentBlue, deltaRed, deltaGreen, deltaBlue) {

    if (currentStep < numSteps) {
        var hexRed   = zeroPad(currentRed.toString(16), 2);
        var hexGreen = zeroPad(currentGreen.toString(16), 2);
        var hexBlue  = zeroPad(currentBlue.toString(16), 2);
        var color = "#" + hexRed + hexGreen + hexBlue;

        document.getElementById('abc').style.backgroundColor = color;

        currentRed   += deltaRed;
        currentGreen += deltaGreen;
        currentBlue  += deltaBlue;

        timerID = setTimeout("fade(currentStep, numSteps, currentRed, currentGreen, currentBlue, deltaRed, deltaGreen, deltaBlue)", 70); 

    } else if (currentStep == numSteps) { 

        var hexRed   = endingRed.toString(16);  // <-- JSLint flags this line
        var hexGreen = endingGreen.toString(16);  // <-- JSLint flags this line
        var hexBlue  = endingBlue.toString(16);  // <-- JSLint flags this line
        var color = "#" + hexRed + hexGreen + hexBlue;  // <-- JSLint flags this line

        document.getElementById('abc').style.background = color;
    }
}

JavaScript scopes variables to the function they're in, not to the block between { and }.

For example:

function test(){
   var i=0;
   if (i > 5) {
      var x = i + 1;
      alert(x);
   }
}

actually means:

function test(){
   var i, x;
   i = 0;
   if (i > 5) {
      x = i + 1;
      alert(x);
   }
}

You can think of is as all variables actually being created with "var" at the top of the function, but initialized to a value where you first assign it.

To fix your issues, simply make this explicit by declaring the variables at the top of your function, like I did in the second code snippet above.

Declare your variables at the top of the function once:

function fade(...) {
    var hexRed, hexGreen, hexBlue, color;
    ...

put var hexRed, hexGreen, hexBlue, color
as the first line in your function, before the if
remove all other var declarations

Javascript scoping doesn't work like other c-style languages. There are only a few possible scope levels- global, function, with, and maybe another odd one or two. the if statement does not create a new scope. What you are doing is effectively

function fade(currentStep, numSteps, currentRed, currentGreen, currentBlue, deltaRed, deltaGreen, deltaBlue) {

    var hexRed;
    var hexGreen;
    var hexBlue;  
    var color;
    var hexRed;
    var hexGreen;
    var hexBlue;  
    var color;


    if (currentStep < numSteps) {
         hexRed   = zeroPad(currentRed.toString(16), 2);
         hexGreen = zeroPad(currentGreen.toString(16), 2);
         hexBlue  = zeroPad(currentBlue.toString(16), 2);
         color = "#" + hexRed + hexGreen + hexBlue;

        document.getElementById('abc').style.backgroundColor = color;

        currentRed   += deltaRed;
        currentGreen += deltaGreen;
        currentBlue  += deltaBlue;

        timerID = setTimeout("fade(currentStep, numSteps, currentRed, currentGreen, currentBlue, deltaRed, deltaGreen, deltaBlue)", 70); 

    } else if (currentStep == numSteps) { 

         hexRed   = endingRed.toString(16);  // <-- JSLint flags this line
         hexGreen = endingGreen.toString(16);  // <-- JSLint flags this line
         hexBlue  = endingBlue.toString(16);  // <-- JSLint flags this line
         color = "#" + hexRed + hexGreen + hexBlue;  // <-- JSLint flags this line

        document.getElementById('abc').style.background = color;
    }
}

which is why jslint is complaining, although your script should still work. This process where the variable declaration is put in the right scope regardless of where the statement exists is known as "hoisting".