Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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')
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 variable called bodyColor. So if the body class is "blue" and the user clicks and switches it to "red" I want to store red as a variable (bodyColor) for other uses later on. Or better yet, set document.body.className as a variable itself and then switch out document.body.className in the switchBodyColor() function with that variable.
I thought something along the lines of:
if (document.body.className == 'blue')
document.body.className = 'red',
var bodyColor = red;
var bodyColor = document.body.className
to set the body class as a variable.
Of course neither of those two options work. ^_^; How can I accomplish either (or both) of the above?
You need your variable to 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 your other example, you also need to put quotes around your color string:
bodyColor = "red";
Another way to do this might be to number your color classes, which will let you use simple arithmetic to change your classes and allows you to easily change the number of classes you are cycling through.
var colorNum = 0;
var totalColors = 3;
function switchBodyColor() {
colorNum = (colorNum+1)%totalColors;
document.body.className = 'color'+colorNum;
You css would be:
.color0 { background-color: blue; }
.color1 { background-color: red; }
.color2 { background-color: green; }
Or whatever your color class definitions are.
–
You could store the colors in an array, then by manipulation 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 app, just call:
bodyColors[0]; // Will refer to the current body class
Optional Check for Initial State
The previous code assumes your body element always starts with blue. If that is not the case, you could add this one-time run 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 would make sense to use an Array because its order is always honored. However since there is no "indexOf" in at least IE7 and below, we have no way of matching the current color to its position in the array without a loop.
This is where the Array.shift and Array.push commands come into play. Array.shift removes the first element in the array, and returns it. Array.push takes what is passed to it, and "pushes" it onto the end of the array. By combining the two methods together we can take the first item and move it to the end, creating a carousel of sorts:
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 honored and the first element is always set to what we want, thus bodyColor[0] is always the current color.
–
–
–
–
If you want to set a global variable then you will have to declare it outside the function, so that your other functions can access it. So it 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 switch case block.
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.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
