html - Javascript change CSS page with javascript buttons and save based on cookie -

all right, folks! here basic gist of question:

i wish create cookie on user's computer called cursor value of yes default. then, want create 2 buttons on home page. 1 of them "change cursor default" , other "change cursor new."

they both modify cursor cookie. if cookie's value set yes, load main css page. otherwise, load alternate css page.

here have attempted doesn't seem work:

in head tags:

<link type="text/css" rel="stylesheet" href="http://example.com/main.css" /> <script type="text/javascript">     window.onload = function () {  window.onload = function() { var curcookie=getcookie("cursor"); if (curcookie===null) {     curcookie = ""; } if(curcookie === "no") {     changecookie(); } function getcookie(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);     if (c.indexof(nameeq) != -1) return c.substring(nameeq.length,c.length); } return null; } function changecookie() {     var oldlink = document.getelementsbytagname("link").item(5);     var newlink = document.createelement("link");     newlink.setattribute("rel", "stylesheet");     newlink.setattribute("type", "text/css");     newlink.setattribute("href", "http://example.com/alt.css");     document.getelementsbytagname("head").item(0).replacechild(newlink, oldlink); } </script> 

in body tags:

<script type="text/javascript">     document.getelementbyid("cursoroptions").innerhtml = ("<input type=\"button\" value=\"change cursor default\" onclick=\"document.cookie = \"cursor=no\"\"" /><br /><input type=\"button\" value=\"change cursor new\" onclick=\"document.cookie = \"cursor=yes\"\"" />); </script> <div id="cursoroptions"></div> 

another note using godaddy if means anything. hope information enough. if not, please tell me so.

thank you!

update:

thank of help, akshay! using said , knew, here final code worked me.

document.getelementsbytagname("head")[0].setattribute("id", "linkcss"); hellocookie();  function hellocookie() {    var curcookie = getcookie("cursor");    if (curcookie === null) {       curcookie = "";    }    if (curcookie === "no") {       changecss2();    }    else {       changecss1();    } }  function getcookie(cname) {    var name = cname + "=";    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);       if (c.indexof(name) === 0) return c.substring(name.length,c.length);    }    return ""; }  function changecss1() {    document.getelementbyid("linkcss").innerhtml += ('<link rel="stylesheet" type="text/css" href="http://example.com/firstcss.css">'); }  function changecss2() {    document.getelementbyid("linkcss").innerhtml += ('<link rel="stylesheet" type="text/css" href="http://example.com/secondcss.css">'); } 

as buttons:

<script type="text/javascript">    window.addeventlistener("load", function(evt) {document.getelementbyid("cursoroptions").innerhtml = ("<input type=\"button\" class=\"mysubmitbutton\" value=\"change cursor default\" onclick=\'document.cookie=\"cursor=no\"' /><br /><input type=\"button\" class=\"mysubmitbutton\" value=\"change cursor lazybott\" onclick=\'document.cookie = \"cursor=yes\"' />");}) </script> <div id="cursoroptions"></div> 

your javascript code badly formatted.

you not closing brackets, , writing onload twice. that's why code won't work. , using double qutoes in place of single quotes here.

onclick=\"document.cookie = \"cursor=no\"\"" 

but should use.

onclick=\'document.cookie=\"cursor=no\"' 

here's proper code.

<link type="text/css" rel="stylesheet" href="http://example.com/main.css" /> <script type="text/javascript"> window.onload = function() {    var curcookie = getcookie("cursor");   if (curcookie == null) {     curcookie = "";   }   if (curcookie == "no") {     changecookie();   } };  function getcookie(name) {   var nameeq = name + "=";   var ca = document.cookie.split(';');   (var = 0; < ca.length; i++) {     var c = ca[i];     while (c.charat(0) == ' ') c = c.substring(1);     if (c.indexof(nameeq) != -1) return c.substring(nameeq.length, c.length);   }  };  function changecookie() {   var oldlink = document.getelementsbytagname("link").item(0);   oldlink.href = 'http://example.com/alt.css';  }; </script> 

for body tag:

<script type="text/javascript">     document.getelementbyid("cursoroptions").innerhtml = ("<input type=\"button\" value=\"change cursor default\" onclick=\'document.cookie=\"cursor=no\"' /><br /><input type=\"button\" value=\"change cursor new\" onclick=\'document.cookie = \"cursor=yes\"' />"); </script> <div id="cursoroptions"></div> 

working fiddle