Alternanza di stili di attivazione in JavaScript

Nella lezione precedente abbiamo imparato ad attivare le celle cliccandoci sopra. Ora facciamo in modo che i colori si alternino: lasciamo che la prima cella diventi rossa, la seconda - verde, la terza - di nuovo rossa e così via.

Per risolvere questo compito avremo già bisogno di due classi CSS:

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

Implementiamo l'alternanza descritta:

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

Analizza il mio codice, poi ripeti autonomamente la soluzione di questo problema.

Alternanza di molti colori da un array

Ora supponiamo di voler alternare non due colori, ma un numero arbitrario. Per fare ciò, memorizziamo un array di classi CSS:

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

Scriviamo i colori per le nostre classi:

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

E ora implementiamo l'alternanza:

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

Spiega come funziona il codice che ho fornito.