JavaScript: Error - variable already defined? Why? - Stack Overflow

admin管理员组

文章数量:1357568

I'm using the awesome JSLint tool to ensure my JavaScript 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;
    }
}

I'm using the awesome JSLint tool to ensure my JavaScript 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

Share Improve this question Follow asked Nov 12, 2010 at 15:35 HeatherKHeatherK 2,33344 gold badges2020 silver badges1212 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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 plaining, 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".

本文标签： JavaScript Errorvariable already defined WhyStack Overflow