JavaScript'te Aktivasyon Stillerini Dönüşümlü Kullanma

Önceki derste, hücrelere tıklandığında onları aktif hale getirmeyi öğrenmiştik. Şimdi ise renklerin dönüşümlü olarak değişmesini sağlayalım: ilk hücre kırmızı, ikinci hücre yeşil, üçüncü hücre yine kırmızı olsun ve bu böyle devam etsin.

Bu problemi çözmek için iki CSS sınıfına ihtiyacımız olacak:

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

Açıklanan dönüşümü uygulayalım:

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

Kodumu inceleyin ve ardından bu problemi kendi başınıza çözmeyi deneyin.

Diziden Birden Fazla Rengin Dönüşümü

Şimdi iki renk yerine, istediğimiz sayıda rengi dönüşümlü kullanmak istediğimizi varsayalım. Bunun için bir CSS sınıfları dizisi tutalım:

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

Sınıflarımızın renklerini yazalım:

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

Ve şimdi dönüşümü uygulayalım:

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

Size gösterdiğim kodun nasıl çalıştığını anlatın.