javascript change color after each event

Question

I have three elements, the first element clicked needs to change, lets say to red. no matter what element is clicked. The second element clicked needs to turn green then last element clicked needs to turn blue. When these elements are clicked a second time they need to turn back to white.

The first element is not a problem but how do I move on to change the other elements?

css

    .container {
        background-color: #ffffff;
        border: 1px solid blue;
        border-radius: 10px;
        width: 100px;
        height: 50px;
    }   
    .red { background-color: #ff0000; }
    .green { background-color: #00ff00; }
    .blue { background-color: #0000ff; }

html

<div class='container' id='1' onclick='changeColor(1);'></div>
<div class='container' id='2' onclick='changeColor(2);'></div>
<div class='container' id='3' onclick='changeColor(3);'></div>

javascript

function changeColor(whichOne)
{
    var element = document.getElementById(whichOne);
    if ( whichOne == 1 || whichOne == 2 || whichOne == 3 )
    {
        element.classList.toggle("red");
    }

}//end 

Answer 1

The general process for something like this is:

1. Use an Array to hold the values you want to cycle through and a counter to indicate the position of the next value to use.

2. When you need to apply a value, pull it from the Array using the counter as the index.

3. After using a value, increment the counter so it indicates the next value in the Array. If the counter has reached the end of the Array, reset it back to 0.

Here is an example:

var valuesToUse = ['classA', 'classB', 'classC'],
    nextIndex = 0;

function applyValue(target) {
    var value = valuesToUse[nextIndex];
    nextIndex = (nextIndex + 1) % valuesToUse.length;

    // use `value` on `target`
}

Here is this idea applied to your problem via either cycling through classnames or through color values in JavaScript.

http://jsfiddle.net/teTTR/1/

var colors = ['#ff0000', '#00ff00', '#0000ff'],
    nextColor = 0;

var classes = ['red', 'green', 'blue'],
    nextClass = 0;


var elms = document.querySelectorAll('.color-changer'),
    len = elms.length,
    i = 0;

for (; i < len; i++) {
    elms[i].addEventListener('click', changeColor);
}


elms = document.querySelectorAll('.class-changer');
len = elms.length;
i = 0;

for (; i < len; i++) {
    elms[i].addEventListener('click', changeClass);
}


function changeClass(event) {
    var elm = event.currentTarget,
        currentClass = hasClass(elm, classes);

    if (currentClass) {
        elm.classList.remove(currentClass);
    } else {
        elm.classList.add(classes[nextClass]);
        nextClass = (nextClass + 1) % classes.length;
    }
}


function changeColor(event) {
    var element = event.currentTarget;
    if (element.style.backgroundColor) {
        element.style.backgroundColor = '';
    } else {
        element.style.backgroundColor = colors[nextColor];
        nextColor = (nextColor + 1) % colors.length;
    }
}


function hasClass(elm, classes) {
    var len,
        i;
    if (isArray(classes)) {
        len = classes.length;
        i = 0;
        for (; i < len; i++) {
            if (elm.classList.contains(classes[i])) {
                return classes[i];
            }
        }
        return false;
    }
    return elm.classList.contains(classes) ? classes : false;
}


function isArray(item) {
    return Object.prototype.toString.call(item) === '[object Array]';
}