Kubadilisha Mitindo ya Uanzishaji kwenye JavaScript

Katika somo lililopita tulijifunza jinsi ya kuwezesha seli kwa kubofya kwenye seli. Sasa tufanye ili kubadilishana kwa rangi kutokea: acha seli ya kwanza iwe na rangi nyekundu, ya pili - kijani, ya tatu - nyekundu tena na kadhalika.

Ili kutatua tatizo hili, tutahitaji madarasa ya CSS mawili:

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

Tutekeleze kubadilishana kuliokoeelezwa:

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

Chambua msimbo wangu, kisha hurudie suluhisho la tatizo hili peke yako.

Kubadilishana Rangi Nyingi Kutoka kwenye Safu

Hebu sasa tubadilishane si rangi mbili tu, bali idadi yoyote. Hebu tuweke safu ya madarasa ya CSS:

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

Tuandike rangi za madarasa yetu:

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

Sasa tutekeleze kubadilishana:

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

Eleza jinsi msimbo niliotoa unavyofanya kazi.