Наизменична активација на стилови во 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;
		}
	});
}

Објаснете како работи мојот код.