Nevýhody tříd v JavaScriptu

Předpokládejme, že máme několik tříd pro stylizaci zpráv:

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

Předpokládejme, že v určitém prvku jsme zobrazili úspěšnou zprávu a přiřadili jí příslušnou třídu pro úspěch:

elem.classList.add('success');

Předpokládejme nyní, že jsme ve stejném prvku zobrazili chybovou zprávu a přiřadili jí příslušnou třídu pro chybu:

elem.classList.add('error');

Výsledkem bude, že prvek bude mít dvě vzájemně konfliktní třídy:

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

Vychází to tak, že před přidáním nové třídy budeme muset nejprve odstranit tu předchozí:

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

To není příliš pohodlné, protože my nemusíme vědět, která přesně byla předchozí třída a budeme muset odstranit všechny třídy jednu po druhé:

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

Je dán input. Při ztrátě fokusu zkontrolujte, že bylo do něj zadáno maximálně 9 znaků. Pokud ano, obarvěte ohraničení inputu na zelenou, pokud ne - na červenou.