Podrías tener un array con los colores y a cada elemento al que le debes de cambiar el color, le asignas un pseudo-atributo en el cual llevarás la cuenta de los clics, así, según sea el valor de dicha cuenta, asignarás uno de los colores del array al elemento. Un ejemplo:
Código HTML:
Ver original<div onclick = "color(this)" data-cuenta = "-1"></div> <div onclick = "color(this)" data-cuenta = "-1"></div>
Código Javascript
:
Ver originalfunction color(elemento){
var colores = ["gray", "red", "yellow"],
cuenta = Number(elemento.dataset.cuenta);
if (cuenta + 1 <= colores.length - 1){
cuenta++;
}
else{
cuenta = 0;
}
elemento.style.background = colores[cuenta];
elemento.dataset.cuenta = cuenta;
}
Tengo dos divisiones a las cuales, cada vez que les de un clic, ejecutarán la función
color y le pasaré al propio elemento como argumento. También defino al pseudo-atributo
data-cuenta que iniciará con el valor -1 ya que, como el primer valor de un array se encuentra en la posición cero, al momento de dar el primer clic, el valor del pseudo-atributo se incrementará en uno, convirtiéndose en cero y pudiendo así tomar al primer elemento del array.
En la función, declaro al array con los tres colores y tomo el valor numérico del pseudo-atributo del elemento
clickeado. Luego, si dicho valor más uno es menor o igual que la última posición del array (sería imposible intentar tomar un valor del array más allá del límite), entonces, incremento a dicho valor en uno, caso contrario, es decir, si el valor del pseudo-atributo es mayor que la última posición del array, lo fijo en cero para así tomar al primer elemento del array y generar el bucle.
Finalmente, asigno el color respectivo al elemento y actualizo el valor de su pseudo-atributo.
DEMO
Saludos