JavaScript да класларни ишлатдаги ноqулайлик

Фарз қилайлик, бизда хабарларни стилларлаш учун бир нечта класслар бор:

.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>

Маълум бўлдики, янги классни қўшishдан олдин, биз аввалги классни ўчиришимиз керек:

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

Бу жуда қулай эмас, чунки биз аввалги класс қайси эканини билмаслигимиз мумкин ва биз барча классларни кетма-кет ўчиришимиз керак бўлади:

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

Инпут берилган. Фокус йўқотилганда, унинг ичига 9-та белгидан ортиқ киритилмаганини текширинг. Агар шундай бўлса, инпут чегарасини яшил рангга бўянг, акс ҳолда қизил рангга бўянг.