Εναλλαγή Στυλ Ενεργοποίησης σε JavaScript

Στο προηγούμενο μάθημα μάθαμε να ενεργοποιούμε κελιά κάνοντας κλικ πάνω τους. Ας κάνουμε τώρα να εναλλάσσονται τα χρώματα: ας χρωματίζεται το πρώτο κελί σε κόκκινο, το δεύτερο - σε πράσινο, το τρίτο - πάλι σε κόκκινο και ούτω καθεξής.

Για την επίλυση αυτού του προβλήματος θα χρειαστούμε ήδη δύο CSS κλάσεις:

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

Ας υλοποιήσουμε την περιγραφόμενη εναλλαγή:

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

Αναλύστε τον κώδικά μου και στη συνέχεια ανεξάρτητα επαναλάβετε τη λύση αυτού του προβλήματος.

Εναλλαγή Πολλών Χρωμάτων από έναν Πίνακα

Ας πούμε τώρα ότι θέλουμε να εναλλάσσουμε όχι δύο χρώματα, αλλά έναν αυθαίρετο αριθμό. Ας αποθηκεύσουμε για αυτό έναν πίνακα με CSS κλάσεις:

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

Ας γράψουμε τα χρώματα των κλάσεών μας:

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

Και τώρα ας υλοποιήσουμε την εναλλαγή:

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

Εξηγήστε πώς λειτουργεί ο κώδικας που παρέθεσα.