A JavaScript osztályok kényelmetlensége

Tegyük fel, hogy van néhány osztályunk üzenetek stílusozásához:

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

Tegyük fel, hogy egy elemben sikeres üzenetet jelenítünk meg, és hozzárendeljük neki a sikeres állapotnak megfelelő osztályt:

elem.classList.add('success');

Tegyük fel, hogy most ugyanebben az elemben hibaüzenetet jelenítünk meg, és hozzárendeljük neki a hibának megfelelő osztályt:

elem.classList.add('error');

Ennek eredményeképpen az elemben két egymással konfliktusban lévő osztály lesz:

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

Kiderül, hogy az új osztály hozzáadása előtt először el kell távolítanunk az előzőt:

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

Ez nem túl kényelmes, mivel lehet, hogy nem tudjuk, pontosan melyik volt az előző osztály, és egymás után kell eltávolítanunk minden lehetséges osztályt:

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

Adott egy input. Fókuszvesztéskor ellenőrizd, hogy nem több mint 9 karaktert írtak-e bele. Ha igen, színezd az input keretét zöldre, ha nem - pirosra.