why doesn't JavaScript toLowerCase work?

Question

In this fiddle http://jsfiddle.net/CBxbT/29/, if you click the black box, a random color is selected, and then after its id is stripped down and changed to lowercase, the random color's id is compared to whatever color you "guess" by clicking on one of the three boxes.

The fiddle works, but the same concept (i.e same code but different element names) is not working on my live site. One my live site, I get an alert for the variable guess, but then I don't get anymore alerts, whereas in the fiddle, it keeps going and gives me an alert after ran is changed to lower case.

Is there a problem with the way I did that might be causing the problem on my live site.

ran = ran.toLowerCase();

code from fiddle

$("#red, #blue, #green").click(function(e) { 
     guess = $(this).attr('id'); 
     alert(guess);
     ran = ran.toLowerCase(); //works here but not on my live site
    alert(ran);
    if(ran.charAt(1) === 'f'){
        ran = ran.slice(3);
    } else
        ran = ran.slice(1);
        alert(ran);

     if (guess === ran) { 
         $('#results').fadeOut(1000);
              } else { 
                  $('#wrong').fadeOut(1000); 
                  }
 }); 

My live site my actual site

Click the start button. It will show an audio player that is randomly selected.

Click one of the spelled-out numbers from the bottom row of numbers. That is your "guess"

It should, according to the code, give you an alert of the randomly selected audio player number, but it doesn't.

relevant code from live site

$("#one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten, #eleven, #twelve, #thirteen, #fourteen, #fifteen, #sixteen").click(function(e) { 
     guess = $(this).attr('id'); 
     alert(guess);
     ran = ran.toLowerCase(); 
     alert(ran);
     if(ran.charAt(1) === 'f'){
        ran = ran.slice(3);
    } else
        ran = ran.slice(1);
     alert(ran);
     if (guess === ran) { 
         $('#right').fadeIn(1000);
              } else { 
                  $('#wrong').fadeIn(1000); 
                  }
 }); 
}

Answer 1

If you look at the JavaScript error console, you'll see this:

ran is undefined

I suggest you start using Firebug or something similar so that you'll see the error console while you're developing.

On your live site the event for clicking on the "start" button has this line:

var ran = getRandom(myArray, true);

The var keyword creates a local variable called ran, so you're creating a new variable and not initializing the global one. Remove var from that line and it should work.