Neudobje razredov v JavaScriptu

Recimo, da imamo več razredov za oblikovanje sporočil:

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

Recimo, da smo v nekem elementu prikazali uspešno sporočilo in mu dodelili ustrezni razred za uspeh:

elem.classList.add('success');

Recimo zdaj, da smo v tem istem elementu prikazali sporočilo o napaki in mu dodelili ustrezni razred za napako:

elem.classList.add('error');

Kot rezultat se bo izkazalo, da bo imel element dva razreda, ki si nasprotujeta:

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

Izkazalo se je, da bomo morali pred dodajanjem novega razreda najprej odstraniti prejšnjega:

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

To ni zelo priročno, saj morda ne vemo, kateri točno je bil prejšnji razred in bomo morali odstraniti vse razrede zaporedoma:

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

Podan je vnos. Ob izgubi fokusa preverite, ali vanj ni vnesenih več kot 9 znakov. Če je tako, pobarvajte obrobo vnosa v zeleno barvo, če ni - v rdečo.