Setting document.body.className as a variable

Question

This is my code to switch the class of my body tag when a user clicks a link.

function switchBodyColor() {
    if (document.body.className == \'blue\')
              


        

Answer 1

I would write a function and an array for this:

var classNames = { 'blue': 'red', 'red': 'green', 'green': 'blue' };

function setBodyClass( className ) {
   document.body.className = className;
   bodyColor = className;
}

function switchBodyColor() {
   var newClass = classNames[ document.body.className ];
   if( newClass.length ) { //body.className is in the array.
       setBodyClass( newClass );
   }
}

This of course is assuming that the bodyColor and classNames variables are in global scope.