Cookie value to define style on page load

Question

I am using the scripts from here http://www.quirksmode.org/js/cookies.html and have successfully created a cookie.. it is set based on the users response to the age drop down. However I am having trouble doing anything with it. I would like to have a style defined if a cookie is present. Here is the bulk of my scripts..

function createCookie(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 checkAge()
      {

         var min_age = 13;
         var year = parseInt(document.forms["emailForm"]["year"].value);
         var month = parseInt(document.forms["emailForm"]["month"].value) - 1;
         var day = parseInt(document.forms["emailForm"]["day"].value);
    var theirDate = new Date((year + min_age), month, day);
            var today = new Date;

            if ( (today.getTime() - theirDate.getTime()) < 0) {

             var el = document.getElementById('emailBox');
             if(el){
                    el.className += el.className ? ' youngOne' : 'youngOne';
                    }
             document.getElementById('emailBox').innerHTML = "<style type=\"text/css\">.formError {display:none}</style><p>Good Bye</p><p>You must be 13 years of age to sign up.</p>"; 
     createCookie('age','not13',0)
                return false;
            }
            else {
                createCookie('age','over13',0)
                return true;
            };
        };

window.onload=function(){
   var x = readCookie('not13');
   if (x)  {    
   document.getElementById('emailBox').innerHTML = "<style type=\"text/css\">.formError {display:none}</style><p>Good Bye</p><p>You must be 13 years of age to sign up.</p>"; 
   }
}

Age verification works and cookie is set.... no errors (from Firebug).. can anyone see what I am doing wrong?

Answer 1

with jQuery would be something like this

if (x) {
    var style =  "<style type=\"text/css\">.form {display:none}</style>";
    $("header").append(style);
}

Answer 2

Looking at your code it should work. There's nothing incorrect about it.

The only thing I would suggest is that instead of injecting a style tag into a empty div, inject a link tag into the head. This will mean that your css changes and maintainance won't need to touch the js code.

Answer 3

I got it.. I was looking for the cookie value and needed to look for the name and then create an if statement based on the value. so..

 var x = readCookie('age');
if (x=='not13')  {    
   document.getElementById('emailBox').innerHTML = "<style type=\"text/css\">.formError {display:none}</style><p>Good Bye</p><p>You must be 13 years of age to sign up.</p>"; 
   }