Nepohodlie tried v JavaScripte

Majme niekoľko tried pre štýlovanie správ:

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

Predpokladajme, že v nejakom prvku sme zobrazili úspešnú správu a pridali sme mu príslušnú triedu pre úspech:

elem.classList.add('success');

Teraz predpokladajme, že v tom istom prvku sme zobrazili chybovú správu a pridali sme mu príslušnú triedu pre chybu:

elem.classList.add('error');

Výsledkom bude, že prvok bude mať dve vzájomne konfliktné triedy:

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

Vychádza nám, že pred pridaním novej triedy musíme najprv odstrániť predchádzajúcu:

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

To nie je veľmi pohodlné, pretože my môžeme nevedieť, ktorá konkrétne bola predchádzajúca trieda a budeme musieť odstraňovať všetky triedy jeden po druhom:

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

Daný je vstupný prvok. Pri strate focusu skontrolujte, či bolo do neho zadaných nie viac ako 9 znakov. Ak áno, zafarbite rámček vstupného prvku na zelenú farbu, a ak nie - na červenú.