Setting document.body.className as a variable

Question

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

function switchBodyColor() { if (document.body.className == 'blue') document.body.className = 'red'; else if (document.body.className == 'red') document.body.className = 'green'; else if (document.body.className == 'green') document.body.className = 'blue'; } 

I want to set the resulting color as a bodyColor variable. Therefore, if the body class is “blue” and the user clicks and switches it to “red”, I want to save the red color as a variable (bodyColor) for other purposes later. Or even better, set document.body.className as the variable itself, and then disable document.body.className in the switchBodyColor () function with this variable.

I thought something like:

  if (document.body.className == 'blue') document.body.className = 'red', var bodyColor = red; 

or

 var bodyColor = document.body.className 

to set the body class as a variable.

Of course, none of these two options work. ^ _ ^; How can I do either (or both) of the above?

Answer 1

Your variable must be global:

 var bodyColor = 'red'; // Global var, initialized to your first color class function switchBodyColor() { if (document.body.className == 'blue') document.body.className = 'red'; else if (document.body.className == 'red') document.body.className = 'green'; else if (document.body.className == 'green') document.body.className = 'blue'; bodyColor = document.body.className; alert(bodyColor); } 

In another example, you also need to put quotation marks around your color bar:

  bodyColor = "red"; 

Another way to do this might be to number your color classes, which allows you to use simple arithmetic to change your classes and makes it easy to change the number of cycles you go through.

 var colorNum = 0; var totalColors = 3; function switchBodyColor() { colorNum = (colorNum+1)%totalColors; document.body.className = 'color'+colorNum; } 

You css:

 .color0 { background-color: blue; } .color1 { background-color: red; } .color2 { background-color: green; } 

Or whatever your color class definitions are.

Answer 2

You can store colors in an array, and then by manipulating always use the first color in the array as the current color:

 var bodyColors = ['blue','red','green']; function switchBodyColor(){ bodyColors.push(bodyColors.shift()); // Move first item to the end document.body.className = bodyColors[0]; } 

And then, anywhere you need it, in your application, just call:

 bodyColors[0]; // Will refer to the current body class 

Optional baseline check

The previous code assumes your body element always starts with blue . If this is not the case, you can add this one-time startup code right below the switchBodyColor() function:

 for(var i=0; i<bodyColors.length; i++){ if(document.body.className == bodyColors[i]) break; bodyColors.push(bodyColors.shift()); } 

Additional explanation

Since you want the colors to always rotate in the same order, it makes sense to use an array because its order is always respected. However, since in IE7 and below there is no " indexOf ", we cannot match the current color with its position in the array without a loop.

The commands Array.shift and Array.push are used Array.push . Array.shift removes the first element in the array and returns it. Array.push takes what is passed to it and pushes it to the end of the array. By combining the two methods together, we can take the first element and move it to the end, creating a carousel:

 var c = [1,2,3]; c.push(c.shift()); console.log(c); // Outputs [2,3,1] c.push(c.shift()); console.log(c); // Outputs [3,1,2] c.push(c.shift()); console.log(c); // Outputs [1,2,3] 

Thus, the order is always respected, and the first element is always set the way we want, so bodyColor[0] always the current color.

Answer 3

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, assumes that the variables bodyColor and classNames are in the global scope.

Answer 4

If you want to set a global variable, you will have to declare it outside the function so that your other functions can access it. So that would be like

 var bodyColor; function switchBodyColor() { if (document.body.className == 'blue') { document.body.className = 'red'; } else if (document.body.className == 'red') { document.body.className = 'green'; } else if (document.body.className == 'green') { document.body.className = 'blue'; } bodyColor = document.body.className; } 

You can also replace the if else if statement with a case switch block.