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

Објасните како функционише код који сам представио.