JavaScript'te Sınıfların Rahatsızlığı

Mesajları stillendirmek için birkaç sınıfımız olduğunu varsayalım:

.success {
	color: green;
}
.warning {
	color: orange;
}
.error {
	color: red;
}

Bir öğede başarılı bir mesaj gösterdiğimizi ve ona başarı durumu için uygun sınıfı atadığımızı varsayalım:

elem.classList.add('success');

Şimdi aynı öğede bir hata mesajı gösterdiğimizi ve ona hata durumu için uygun sınıfı atadığımızı varsayalım:

elem.classList.add('error');

Sonuç olarak, öğede birbiriyle çakışan iki sınıf olacaktır:

<div id="elem" class="success error">
	text
</div>

Yeni bir sınıf eklemeden önce, önceki sınıfı kaldırmamız gerekeceği anlamına gelir:

elem.classList.remove('success');
elem.classList.add('error');

Bu çok uygun değil, çünkü önceki sınıfın tam olarak ne olduğunu bilmeyebiliriz ve tüm sınıfları teker teker kaldırmak zorunda kalabiliriz:

elem.classList.remove('success');
elem.classList.remove('warning');
elem.classList.add('error');

Bir input verildi. Odak kaybında, içine 9'dan fazla karakter girilmediğini kontrol edin. Eğer durum buysa, inputun kenarlığını yeşil renge boyayın, değilse kırmızıya boyayın.