JavaScriptтеги класстарынын ыңгайсыздыгы

Бизде бир нече билдирүүлөрдү стилдөө үчүн класстар бар деп коёлу:

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

Бир элементте ийгиликтүү билдирүү чыгардык жана ага ийгилик үчүн тиешелүү классты тапшырдык деп коёлу:

elem.classList.add('success');

Эми ошол эле элементте ката билирүүсүн чыгардык жана ага ката үчүн тиешелүү классты тапшырдык деп коёлу:

elem.classList.add('error');

Натыйжада элементте бири-бири менен карама-каршы келген эки класс болот:

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

Жаңы классты кошкондон мурун, биз алдынкы классты алып салышыбыз керек болуп чыгат:

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

Бул абдан ыңгайлуу эмес, анткени биз алдынкы класстын кайсынысы экенин билбеши мүмкүн жана биз бардык класстарды катары менен алып салышыбыз керек болот:

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

Инпут берилген. Фокусту жоготкондо, ага 9 белгиден ашык киргизилбегенин текшериңиз. Эгер ошондой болсо, инпуттун чегин жашыл түскө боёңуз, ал эми андай болбосо - кызыл түскө.