Afwisseling van activeringsstijlen in JavaScript

In de vorige les hebben we geleerd hoe we cellen kunnen activeren door erop te klikken. Laten we nu regelen dat de kleuren afwisselen: laat de eerste cel rood kleuren, de tweede - groen, de derde - weer rood, enzovoort.

Om dit probleem op te lossen hebben we twee CSS-klassen nodig:

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

Laten we de beschreven afwisseling implementeren:

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

Bestudeer mijn code en herhaal vervolgens zelfstandig de oplossing voor deze taak.

Afwisseling van meerdere kleuren uit een array

Stel dat we nu niet twee kleuren willen afwisselen, maar een willekeurig aantal. Laten we hiervoor een array met CSS-klassen opslaan:

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

Laten we de kleuren van onze klassen schrijven:

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

En laten we nu de afwisseling implementeren:

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

Leg uit hoe de door mij gegeven code werkt.