I am creating a table of buttons that a internal user can click on individually. I need the buttons to be able to toggle the background from White to Green to Red then back to White .... The user is internal and I can specify that this only works on Chrome. I would like to stick with basic HTML5/CSS3 and Javascript as it is more procedural and my team (we are NOT web page developers) are more likely to be able to maintain it.

Button Elements do not seem to work the same as Text or other elements. I have taken code to change other background colors but it does not work when the element is a button.

My 2 basic blocking issues are:

1. How do you read the current background color in the onClick() routine so my code can calculate the next color?

   How do you change the style or class of a Button element so that the background color changes during or when you exit the onClick() routine?

I have seen examples that define 3 different color styles in the CSS file like this:

.make-background-white { background-color: white}
.make-background-green { background-color: green}
.make-background-red   { background-color: red}

And I can use these when I initially draw the buttons. But I do not know how to 'read' the current background color in the onClick() routine nor can I change the color.

MORE DETAILS

I read from a database to find all the zip-codes around a store sorted by distance. I create a table of buttons with zip-codes as the text and this can range from 40-600 buttons. The background color shows what zip-codes are not-assigned (white background) and what zip codes are assigned (green background).

Sometimes the user wants to click a few White zip codes to signal that they want to assign that code to the store.

I also want some helper buttons on the side that the user can click to automatically color/assign zip codes to the store with a 30 or 60 or 90 mile radius.

I have a large Javascript Hash/associative array behind the scenes that use the zip-code as the key and this is used to create the buttons, track the distance, track which zip codes are assigned or un-assigned, etc. This is straightforward. Its the dynamically changing the button background that is throwing me off.

I did manage after three days of hacking to make something work by using Jquery with call-backs like this:

$(".btn").click(function() {
    if ( $(this).hasClass ('make-background-white') {
        $(this).removeClass('make-background-white');
        $(this).addClass ('make-background-green');
    } else if ( $(this).hasClass('make-background-green') {
         // Remove green, add red
    } else if () {
        // Remove red, add white
    }

}

This seems to trigger the button to re-draw with the new background and works by storing a string in the "class" attribute that I can later read and manipulate. It's a call back in the middle of the rest of my more straight-forward Javascript and the other onClick() routines that use "getElementById()" cannot seem to read or manipulate the "class" attribute in the same fashion.

Any help doing the above in Javascript would be appreciated.

I am creating a table of buttons that a internal user can click on individually. I need the buttons to be able to toggle the background from White to Green to Red then back to White .... The user is internal and I can specify that this only works on Chrome. I would like to stick with basic HTML5/CSS3 and Javascript as it is more procedural and my team (we are NOT web page developers) are more likely to be able to maintain it.

Button Elements do not seem to work the same as Text or other elements. I have taken code to change other background colors but it does not work when the element is a button.

My 2 basic blocking issues are:

1. How do you read the current background color in the onClick() routine so my code can calculate the next color?

   How do you change the style or class of a Button element so that the background color changes during or when you exit the onClick() routine?

I have seen examples that define 3 different color styles in the CSS file like this:

.make-background-white { background-color: white}
.make-background-green { background-color: green}
.make-background-red   { background-color: red}

And I can use these when I initially draw the buttons. But I do not know how to 'read' the current background color in the onClick() routine nor can I change the color.

MORE DETAILS

I read from a database to find all the zip-codes around a store sorted by distance. I create a table of buttons with zip-codes as the text and this can range from 40-600 buttons. The background color shows what zip-codes are not-assigned (white background) and what zip codes are assigned (green background).

Sometimes the user wants to click a few White zip codes to signal that they want to assign that code to the store.

I also want some helper buttons on the side that the user can click to automatically color/assign zip codes to the store with a 30 or 60 or 90 mile radius.

I have a large Javascript Hash/associative array behind the scenes that use the zip-code as the key and this is used to create the buttons, track the distance, track which zip codes are assigned or un-assigned, etc. This is straightforward. Its the dynamically changing the button background that is throwing me off.

I did manage after three days of hacking to make something work by using Jquery with call-backs like this:

$(".btn").click(function() {
    if ( $(this).hasClass ('make-background-white') {
        $(this).removeClass('make-background-white');
        $(this).addClass ('make-background-green');
    } else if ( $(this).hasClass('make-background-green') {
         // Remove green, add red
    } else if () {
        // Remove red, add white
    }

}

This seems to trigger the button to re-draw with the new background and works by storing a string in the "class" attribute that I can later read and manipulate. It's a call back in the middle of the rest of my more straight-forward Javascript and the other onClick() routines that use "getElementById()" cannot seem to read or manipulate the "class" attribute in the same fashion.

Any help doing the above in Javascript would be appreciated.

• javascript
• html
• css

Share Improve this question Follow asked Jun 1, 2012 at 18:26 Bob MacBob Mac 15122 gold badges22 silver badges66 bronze badges 1

• Can you elaborate a little on what the problem is exactly? The code you wrote will do change the colors of the buttons. I've thrown together a little demo showing what you wrote and changing the colors of a button by clicking another button. jsfiddle/CWjWY/1 By the way, your code is missing a ) at the end of if statement. – sachleen Commented Jun 1, 2012 at 18:45

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

If your goal is to implement a background colour-cycling button, in plain JavaScript (in this case without reliance on class-names), then one possible approach is below, though it is, perhaps, over-plicated:

function inArray(needle, haystack) {
    if (!needle || !haystack) {
        return false;
    }
    else {
        var notFound = -1;
        for (var i = 0, len = haystack.length; i < len; i++) {
            if (haystack[i] == needle) {
                return i;
            }
        }
        return notFound;
    }
}

function colorToggle(el, colors) {
    if (!el) {
        return false;
    }
    else {
        var colors = colors || [
            'rgb(255, 0, 0)',
            'rgb(0, 255, 0)',
            'rgb(0, 0, 255)'],
            wGCS = window.getComputedStyle,
            curColor = wGCS(el, null).backgroundColor;
        var pos = inArray(curColor, colors);
        if (pos > -1 && pos < (colors.length - 1)) {
            el.style.backgroundColor = colors[inArray(curColor, colors) + 1];
        }
        else if (pos > -1 && pos == (colors.length - 1)) {
            el.style.backgroundColor = colors[0];
        }
    }
}

var buttons = document.querySelectorAll('button.colorToggle');

for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].style.backgroundColor = 'rgb(255, 255, 255)';
    buttons[i].onclick = function() {
        colorToggle(this, ['rgb(255, 255, 255)','rgb(0, 255, 0)','rgb(255, 0, 0)']);
    };
}​

JS Fiddle demo.

Because of your assurance that this is only required to run in Chrome I've tested only in Chromium 18 (since I don't have Windows or Mac in order to test Google Chrome explicitly), and this does seem to do as you require.

References:

• window.getComputedStyle.

Do you really need to get the CSS attribute before its change? An example without this prerequisite:

<html>
<head>
<script type="text/javascript">
var bg_colors = ['red', 'blue', 'green']

function change_bg_color()
{
  bg_color = bg_colors.shift();
  bg_colors.push(bg_color);
  document.getElementById("demo").style.backgroundColor=bg_color;
}
</script>
</head>
<body>

<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>

<button type="button" onclick="change_bg_color()">change background-color</button>

</body>
</html> 

If you only need one class name at a time per button you can read/write the classname on click.

$(".btn").click(function() {
   var c=this.className;
   if(c=='make-background-white' || c=='')this.className='make-background-red';
   else if(c=='make-background-red')this.className='make-background-green';
   else this.className='make-background-white';
}

This assumes you are starting with white background, either because all buttons start out that way(button, .make-background-white{background-color:white;color:black}), or you set their class attribute.

SUCCESS. I finally found how to access the className attribute with Javascript.

And somehow - setting the className seems to trigger the re-draw of the button.

Below is my function I call with the onClick="zipClick('this_button', 'this_textarea')"

Thank you for all the great responses.

    // This function does 2 things:
    //    Changes the background color of the button
    //    Calls a REST service
    function zipClick (aButtonId, aTextAreaId) {

        var lButton = document.getElementById(aButtonId);
        var lClassName = lButton.className;

        // lClassName should be something like: "btn make-background-yellow"
        //alert ("Button Class Start = " + lClassName);

        if ( lClassName.indexOf('green') > -1 ) {
            lButton.className = 'btn make-background-yellow';
        } else if ( lClassName.indexOf('white') > -1) {
            lButton.className = 'btn make-background-green';
        } else if ( lClassName.indexOf('yellow') > -1 ) {
            lButton.className = 'btn make-background-white';
        } else {
            // Should never get here but fix the class name for the next click
            lButton.className = 'btn make-background-white';
        }

        alert ("old class: " + lClassName + "\nnew class: " + lButton.className);

    }   // zipClick

You can achieve this by jquery setTimeOut function.By maintaining the hidden value for colors you can toggle the style

<script>
setTimeout(function() {   
//code to change style to button
}, 10000);
</script>