JavaScript-de aktivasiýa stillerini çalşyrmak

Öňki sapakda biz gözleriň üstüne basylanda olary aktiwleşdirmegi öwrendik. Indi bolsa reňkleriň çalşyrylmagyny edeliň: birinji göz gyzyl, ikinji göz - ýaşyl, üçünji göz - ýene gyzyl we şuňa meňzeş bolsun.

Bu meseläni çözmek üçin bizä indi iki CSS synpy gerek:

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

Görkezilen çalşyrmany amala aşyralyň:

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

Meniň kodymy düşüň, soňra bu meseläniň çözümini öz başyňyza gaýtalaň.

Massiwden köp reňkleri çalşyrmak

Indi iki reňk däl, islendik mukdarda reňk çalşyrmak isleýändigimizi göz öňüne getireliň. Bunun üçin CSS synplarynyň massiwini saklaýarys:

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

Synplarymyzyň reňklerini ýazalyň:

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

Indi bolsa çalşyrmany amala aşyralyň:

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

Men tarapyndan getirilen kodyň nädip işleýändigini düşündiriň.