Alternancia de estilos de activación en JavaScript

En la lección anterior, aprendimos a activar celdas haciendo clic en ellas. Ahora hagamos que los colores se alternen: que la primera celda se coloree de rojo, la segunda de verde, la tercera de rojo nuevamente y así sucesivamente.

Para resolver esta tarea, necesitaremos dos clases CSS:

.color1 {
	background: red;
}
.color2 {
	background: green;
}

Implementemos la alternancia descrita:

let tds = document.querySelectorAll('#table td');

let color = 'color1';
for (let td of tds) {
	td.addEventListener('click', function() {
		if (color == 'color1') {
			color = 'color2'
		} else {
			color = 'color1'
		}
		
		this.classList.add(color);
	});
}

Analiza mi código y luego repite por tu cuenta la solución de esta tarea.

Alternancia de muchos colores desde un array

Supongamos que ahora queremos alternar no dos colores, sino una cantidad arbitraria. Para ello, almacenemos un array de clases CSS:

let colors = ['color1', 'color2', 'color3'];

Escribamos los colores de nuestras clases:

.color1 {
	background: red;
}
.color2 {
	background: green;
}
.color3 {
	background: yellow;
}

Y ahora implementemos la alternancia:

let tds = document.querySelectorAll('#table td');

let i = 0;
let colors = ['color1', 'color2', 'color3'];

for (let td of tds) {
	td.addEventListener('click', function() {
		this.classList.add(colors[i]);
		
		i++;
		if (i == colors.length) {
			i = 0;
		}
	});
}

Explica cómo funciona el código que he proporcionado.