JavaScript-da klasslar bilan ishlashdagi noqulaylik

Faraz qilaylik, bizda xabarlarni uslublash uchun bir nechta klasslar mavjud:

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

Faraz qilaylik, ma'lum bir elementda muvaffaqiyatli xabar chiqardik va unga muvaffaqiyat uchun mos klassni tayinladik:

elem.classList.add('success');

Endi faraz qilaylik, biz xuddi shu elementda xato haqida xabar chiqardik va unga xato uchun mos klassni tayinladik:

elem.classList.add('error');

Natijada, elementda bir-biri bilan zid bo'lgan ikkita klass bo'ladi:

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

Ma'lum bo'ladiki, yangi klassni qo'shishdan oldin, biz avval oldingi klassni olib tashlashimiz kerak:

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

Bu juda qulay emas, chunki biz oldingi klass qaysi ekanligini bilmasligimiz mumkin va biz barcha klasslarni ketma-ket olib tashlashimiz kerak bo'ladi:

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

Input berilgan. Fokus yo'qotilganda tekshiring, unga 9-ta belgidan ko'p kiritilmaganligini. Agar shunday bo'lsa, input chetini yashil rangga bo'yang, aks holda qizil rangga bo'yang.