Neudobnost klasa u JavaScriptu

Pretpostavimo da imamo nekoliko klasa za stilizovanje poruka:

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

Pretpostavimo da smo u nekom elementu prikazali uspešnu poruku i dodelili mu odgovarajuću klasu za uspeh:

elem.classList.add('success');

Pretpostavimo da sada u istom elementu prikažemo poruku o grešci i dodelimo mu odgovarajuću klasu za grešku:

elem.classList.add('error');

Kao rezultat, ispadaće da će element imati dve klase koje su u konfliktu jedna sa drugom:

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

Ispada da ćemo pre dodavanja nove klase, prvo morati da uklonimo prethodnu:

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

Ovo nije baš zgodno, jer možemo ne znati koja je tačno bila prethodna klasa i moraćemo da uklanjamo sve klase jednu za drugom:

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

Dat je input. Kada izgubi fokus, proverite da li je u njega uneto najviše 9 simbola. Ako jeste, obojite okvir inputa u zelenu boju, a ako nije - u crvenu.