Alternância de Estilos de Ativação em JavaScript

Na lição anterior, aprendemos a ativar células clicando nelas. Agora vamos fazer com que as cores alternem: deixe a primeira célula pintar de vermelho, a segunda - em verde, a terceira - novamente em vermelho e assim por diante.

Para resolver esta tarefa, precisaremos de duas classes CSS:

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

Vamos implementar a alternância 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);
	});
}

Analise meu código e, em seguida, repita a solução para este problema por conta própria.

Alternância de Muitas Cores de um Array

Agora, suponha que queremos alternar não duas cores, mas uma quantidade arbitrária. Vamos armazenar um array de classes CSS para isso:

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

Vamos definir as cores das nossas classes:

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

E agora vamos implementar a alternância:

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;
		}
	});
}

Explique como funciona o código que eu forneci.