Question

I am learning, please be kind if it is an obvious mistake.

/*set cookie*/
function setCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    setCookie(name,"",-1);
}


$(window).load(function() {
//check for the cookie
    var language = readCookie('language');
//if  null show red
    if (language!=null)
    {
        $('.blue').hide();
        alert('No cookie set'); 
    }
//if  null show red
    else if (language!=red)
    {
        $('.blue').hide();
        alert('The cookie is red'); 
    }
//if blue show blue
    else {
        $('.red').hide();
        alert('The cookie is set to blue'); 
    }


    $('#blue').click(function() {
            $('.red').hide();
            $('.blue').show();
            setCookie('language','blue', 30);
            alert('The cookie is set to blue'); 
        });

    $('#red').click(function() {
            $('.red').show();
            $('.blue').hide();
            setCookie('language','red', 30);                
            alert('The cookie is set to red'); 
        });
}); 

Thank-you.

Answer 1

Learning to use Firebug is the best advice. Another helpful tool is a colorizing editor. Even SO provides a little help of this kind. Note the line:

    else if (language!=red)

“red” wasn’t colored as a string, so it stood out by not standing out. Is there a variable named “red” defined somewhere in the original code? If not, this compares language to undefined.

Also, consider the lines that follow this statement:

    else if (language!='red') {
        $('.blue').hide();
        alert('The cookie is red'); 

You just tested that the cookie value was not red, but you alert that it is. You make a similar mistake on the first test:

    if (language!=null) {
        $('.blue').hide();
        alert('No cookie set'); 

language is not null, but the message you display suggests it is.

This isn’t related to your question, but there are some simplifications you can make. For one, jQuery defines a trim method on String to remove leading and trailing whitespace. Make use if this in readCookie rather than the while (c.charAt(0)==' ') loop.

Another improvement is that the current technique of choosing an element to show by using a sequence of if blocks doesn’t scale well. Your homework is to use string operations and whatnot to better handle an arbitrary number of elements, then add “.green”, “.yellow”, “.magenta” and “.cyan” elements. You might need to change the default behavior from showing all .color elements to hiding them. Using objects as associative arrays may also be helpful.