Changing the Font Size of the Text Area with Cookies

Question

At the moment I have added a font size feature to my Textarea.

It works fine but now I wanna add the cookies. This is what I got so far:

var size=size2 + "px";
var size2=15;

function getCookie(c_name){var i,x,y,ARRcookies=document.cookie.split(";");for (i=0;i<ARRcookies.length;i++){x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);x=x.replace(/^\s+|\s+$/g,"");if (x==c_name){return unescape(y);}}}
function setCookie(c_name,value,exdays){var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());document.cookie=c_name + "=" + c_value;}

var cookiesize=getCookie('fontsize');
if(cookiesize!==undefined&&cookiesize!==""&&cookiesize!==null){
size2=cookiesize;  
}
else{}
function add(){
    size2++;
    size=size2+"px";
    if(size2 > 40){size2=40;}

    setCookie('fontsize',size2,365);

    $('#current').html("<b>"+size2+"</b>");
    $('#curren').stop(true,true).animate({'top' : '0px'},500);
    $('#curren').stop(true,true).delay(3500).animate({'top' : '-50px'},1500);
    $('#code1').css('font-size', size2);
}
function less(){
    size2--;
    size=size2+"px";
    if(size2 < 5){size2=5;}

    setCookie('fontsize',size2,365);

    $('#current').html("<b>"+size2+"</b>");
    $('#curren').stop(true,true).animate({'top' : '0px'},500);
    $('#curren').stop(true,true).delay(4000).animate({'top' : '-50px'},1500);
    $('#code1').css('font-size', size2);
}
$(document).ready(function(){
    $('#panel').html("<form method='post' name='pad' align='center'><textarea class='look' rows='11' id='code1' name='text' cols='58'></textarea><br></form>");
    $('#current').html("<b>"+size2+"</b>");
    $('#curren').stop(true,true).animate({'top' : '0px'},500);
    $('#curren').stop(true,true).delay(4000).animate({'top' : '-50px'},1500);
    $('#code1').css('font-size', size2);
});
function show(){ 
    $('#curren').stop(true,true).animate({'top' : '0px'},500);
    $('#curren').stop(true,true).delay(4000).animate({'top' : '-50px'},1500);
}

I didn't give you guys the HTML or the CSS but it shouldn't be needed. Right now all I get is the Undefined message where the font size number should be.

Hope you could help!

Answer 1

Edit: I do see an error now. Switch the order of these two statements from this:

var size=size2 + "px";
var size2=15;

to this:

var size2=15;
var size=size2 + "px";

You were referencing size2 before it was defined.

Also, here is a code suggestion:

Change this:

if(cookiesize!==undefined&&cookiesize!==""&&cookiesize!==null){
size2=cookiesize;  
}
else{}

to this:

if (cookiesize) {
    size2 = cookiesize;  
}

if (cookiesize) protects against null , undefined , 0 , false and "" all in one check. I'd also suggest you use some spaces and new lines in your code to make it more readable.