CODEWITHSUNDEEP
javascriptcsscolors
Greg Bains
Greg Bains

Reputation: 31

Javascript cycling the background color of multiple divs individually

I have a webpage consisting of 6 boxes, divs, which represent the current status of different systems by traffic light colors - red, amber or green.

I want to be able to cycle through these colors individually for each div so each system can have a different status.

Psuedocode for boxes

<div id="system1">System Name</div>
<div id="system2">System Name</div>
<div id="system3">Systen Name</div>

and so forth.

The background color is declared red by CSS on page load for all systems and then I want to be able to click each div individually to cycle through to amber then green then back to red to select the most appropriate.

I am struggling with Javascript to get this to work. I was trying to use 

document.getElementById(elem).style.backgroundColor = 'red';

in an If statement to see what color it is currently and change accordingly but Javascript returns the rgb value. When I tried, for example,

document.getElementById(elem).style.backgroundColor == 'rgb(255,231,51)')

it doesn't match it even though it should.

Any suggestions greatly appreciated!

Upvotes: 2

Views: 1792

Answers (3)

Okan Kocyigit
Okan Kocyigit

Reputation: 13441

I recommend you use class,

<style type="text/css">
    .red {background-color:red;}
    .amber {background-color:yellow;}
    .green {background-color:green;}
</style>

<script type="text/javascript">

function changeColor(e) {
    var c = e.className;
    e.className = (c == 'red') ? 'amber' : 
                  (c == 'amber') ? 'green' : 
                  (c == 'green') ? 'red' : ''; 
}

</script>
<div class="red" id="system1" onclick="changeColor(this)">System Name</div>
<div class="green" id="system2" onclick="changeColor(this)">System Name</div>
<div class="amber" id="system3" onclick="changeColor(this)">Systen Name</div>

​

DEMO

Upvotes: 3

Siva Charan
Siva Charan

Reputation: 18064

Currently you have not mentioned as tag as Jquery but for your reference I have done this.

If you are willing to go for Jquery, you can do this way:-

LIVE DEMO

HTML:

<div class="system">System Name</div>
<div class="system">System Name</div>
<div class="system">Systen Name</div>

JQuery:

$('.system').click(function() {
    switch ($('div.system').index(this))
    {
        case 0: 
                $(this).css('background-color', 'red');
                break;
        case 1: 
                $(this).css('background-color', 'green');
                break;
        case 2: 
                $(this).css('background-color', 'blue');
                break;
    }
});​

Upvotes: 0

Tschallacka
Tschallacka

Reputation: 28742

Browsers translate differently how the colors look when you give them colours like "red". Also I think your approach is wrong. I'd use classes that maintain all information.

ACommonSystem = function(linkto) 
    {
    this.domobject = linkto;
    // 0 = off, 1 = on, 2 = crashed, 3 = destroyed
    this.state = 0;
    this.errors = null;
    }
ACommonSystem.prototype.turnOn = function()
    {
    if(this.state < 2)
        {
        this.state = 1;
        this.domobject.style.backgroundColor = "green";
        }
    }
ACommonSystem.prototype.turnOff = function()
    {
    this.state = 0;
    this.domobject.style.backgroundColor = "blue";
    }
ACommonSystem.prototype.crash = function()
    {
    this.state = 2;
    this.domobject.style.backgroundColor = "red";
    this.errors = "I've been kicked";
    }
ACommonSystem.prototype.die = function()
    {
    this.state = 3;
    this.domobject.style.backgroundColor = "black";
    this.errors = "i've burned out";
    }

mysystem1 = ACommonSystem(document.getElementById('system1'));
mysystem1.turnOn();
window.setTimeout(3000,function(){mysystem1.crash();})

Upvotes: 0

Related Questions