Тағйир додани тарзҳои фаъолсозии стилҳо дар 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;
		}
	});
}

Дар бораи он, ки коди овардашудаи ман чӣ гуна кор мекунад, нақл кунед.