In this fiddle /, 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 pared 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); 
                  }
 }); 
}

In this fiddle http://jsfiddle/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 pared 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); 
                  }
 }); 
}

• javascript
• jquery

• toLowerCase is part of Javascript. And can you improve on your question title? Perhaps summarise the problem? – Lightness Races in Orbit Commented Jul 20, 2011 at 9:31
• What are you seeing which suggests it's not working? And can you tell us what's different on your live site? (The correct answer is not 'nothing') – Gareth Commented Jul 20, 2011 at 9:36
• Do you see an error in the JavaScript console? Can you copy-paste the exact code from your live site? Are you sure it's that exact spot it's alerting and not someplace else (change it to alert("foo") to test)? – JJJ Commented Jul 20, 2011 at 9:37
• 2 ran = ran.toLowerCase(); What values had ran before this? ran isn't initialized here – Kreker Commented Jul 20, 2011 at 9:37
• 2 Can you post the code that doesn't work, rather than the code that does? I'd suspect it's something straightforward like a typo... – Town Commented Jul 20, 2011 at 9:37

1 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.