Toggling Background-Color with Radio Btns works! But the Cookie does not?

Question

Am working with Cookies for the first time.. Have included the jquery cookie script.. Am looking to have these toggle-btns apply a site-wide background-color change that is maintained from page to page.

The toggle btns html looks like this:

  <div class="btn-group btn-group-xs" data-toggle="buttons">
    <label class="btn btn-default lightBtn">
      <input type="radio" name="options" id="light"> Light
    </label>
    <label class="btn btn-default darkBtn">
      <input type="radio" name="options" id="dark"> Dark
    </label>
  </div>

And the working JQuery looks like this:

   $('.lightBtn').click( function() {
      var color = "white";
      $("body").removeClass("black").addClass(color);
      $(".modal-content").removeClass("black").addClass(color);
      $(".dropdown-menu").removeClass("black").addClass(color);
   });
   $('.darkBtn').click( function() {
      var color = "black";
      $("body").removeClass("white").addClass(color);
      $(".modal-content").removeClass("white").addClass(color);
      $(".dropdown-menu").removeClass("white").addClass(color);
   });
});

But the cookie code that I iterated on from another stack post looks like this:

$( function() {
   $('.lightBtn').click( function() {
      var color = "white";
      $("body").removeClass("black").addClass(color);
      $(".modal-content").removeClass("black").addClass(color);
      $(".dropdown-menu").removeClass("black").addClass(color);
      createCookie("color", color);
      return false;
   });
   $('.darkBtn').click( function() {
      var color = "black";
      $("body").removeClass("white").addClass(color);
      $(".modal-content").removeClass("white").addClass(color);
      $(".dropdown-menu").removeClass("white").addClass(color);
      createCookie("color", color);
      return false;
   });

    if (readCookie("color") != null && readCookie("color") != "white") {
      $("body").removeClass("black").addClass(readCookie("color"));
      $(".modal-content").removeClass("black").addClass(readCookie("color"));
      $(".dropdown-menu").removeClass("black").addClass(readCookie("color"));
    }
    else if {
    if (readCookie("color") != null && readCookie("color") != "black") {
      $("body").removeClass("white").addClass(readCookie("color"));
      $(".modal-content").removeClass("white").addClass(readCookie("color"));
      $(".dropdown-menu").removeClass("white").addClass(readCookie("color"));
    }
    else {
      $("body").removeClass("black").addClass("white");
      $(".modal-content").removeClass("black").addClass("white");
      $(".dropdown-menu").removeClass("black").addClass("white");
    }

});

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 eraseCookie(name) {
createCookie(name,"",-1);
}

Answer 1

You can try this, This is refactored code

var cookieColor = readCookie("color");
var removeColor = "";
if(cookieColor == null){
    cookieColor = "white";
    removeColor = "black";      
} else if(cookieColor != 'white'){
    removeColor = "black";
} else if(cookieColor != 'black'){
    removeColor = "white";
}

$("body").removeClass(removeColor).addClass(cookieColor);
$(".modal-content").removeClass(removeColor).addClass(cookieColor);
$(".dropdown-menu").removeClass(removeColor).addClass(cookieColor);