Question

I’m trying to change a div background color to a different color depending on what the div’s current color is, when the div is clicked on. The following code does not work. I’ve figured it has something to do with my “if” statements because it works fine if I just make them change to 1 color with no “if” statements.

<script language="JavaScript">
function setColor(blockId) {
    if (document.getElementById(blockId).style.background == '#FF0000') {
        document.getElementById(blockId).style.background = '#0000FF';
    }else if (document.getElementById(blockId).style.background == '#0000FF') {
        document.getElementById(blockId).style.background = '#999999';
    }else if (document.getElementById(blockId).style.background == '#999999') {
        document.getElementById(blockId).style.background = '#FF0000';
    }
}
</script>

<div id="b1" style="background-color:#FF0000; height:100px; width:100px;" onClick="setColor('b1')"></div>

Answer 1

Increment an index to identify which background you are using from a list of backgrounds. You can store that index as a property on the element.

var backgrounds = ["#0000FF", "#999999", "#FF0000"];
function setColor(el) {
    el.colorIdx = el.colorIdx || 0;
    el.style.backgroundColor = backgrounds[el.colorIdx++ % backgrounds.length];
}

Also, rather than doing a lookup on that element via document.getElementById(), just pass this from the onclick handler, and your function has a reference to the element itself.

<div onclick="setColor(this)"></div>

Working demo: http://jsfiddle.net/gilly3/vPMPb/