Jquery: How to make this ternary operator start on an event?

in this fiddle,http://jsfiddle.net/urfXq/79/, if you click on the black "button", it randomly chooses an element (red, green or blue) from an array. The array is graphically represented by the colored boxes at the top. Obviously the colored boxes at the top don`t need to be there开发者_开发百科.

That part seems to work fine. Indeed, here`s a fiddle that shows the first part works jsfiddle.net/urfXq/46 . Assming this is the correct way to assign the random result to a variable (after converting it to lower case)

$("#button").click(function() {
var ran = getRandom(myArray, true).toLowerCase();
});

the problems seem to start in the second part. The user is supposed to guess which color was chosen. The user guesses by clicking on one of the colored boxes at the bottom. The guess is assigned to the variable "guess"

It is at this point--after the user guesses--that I want the ternary operator to be triggered and to compare variable "ran" with "guess". If they are the same, then box pink fades out. If they are different, box lime-green fades out.

This whole last function seems to be full of problems that I can`t figure out.

//user clicks button to guess
$("#red,#blue, #green").click(function() {
  //if click blue is blue being assigned to guess?
    var guess = $(this);
 //ternary to compare if guess and random are equal
   $("guess===ran") ? results.fadeOut(1000) : wrong.fadeOut(1000);
  });

Arrggg there're so many things to improve, but at least it works:

var myArray = [],
    ran, guess;

myArray[0] = "RED";
myArray[1] = "BLUE";
myArray[2] = "GREEN";

//function getRandom to choose a random element from array
function getRandom(array, getVal) {
    var key = Math.floor(Math.random() * array.length);
    if (getVal) {
        return array[key];
    }
    return key;
}

//click the black button to call the random function
$("#button").click(function() {
    ran = getRandom(myArray, true).toLowerCase();
});

//user clicks button to guess
$("#red, #blue, #green").click(function(e) {
  //if click blue is blue being assigned to guess?
    guess = $(this).attr('id');
    //ternary to compare if guess and random are equal

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

this should work

var ran;
$("#button").click(function() {
    ran = getRandom(myArray, true).toLowerCase();
});

$("#red, #blue, #green").click(function() {
    if($(this) === ran){
        results.fadeOut(1000);
    }else{
        wrong.fadeOut(1000);
    }
});

EDIT:

I just looked at the jsFiddle. There are so many mistakes in there I don't know where to start...