Ongemak van classes in JavaScript

Stel we hebben enkele classes voor het stylen van berichten:

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

Stel dat we in een bepaald element een succesbericht hebben getoond en er de bijbehorende class voor succes aan hebben toegekend:

elem.classList.add('success');

Stel dat we nu in hetzelfde element een foutmelding tonen en er de bijbehorende class voor een fout aan toekennen:

elem.classList.add('error');

Het resultaat is dat het element twee met elkaar conflicterende classes zal hebben:

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

Blijkbaar moeten we, voordat we een nieuwe class toevoegen, eerst de vorige verwijderen:

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

Dit is niet erg handig, omdat we misschien niet weten welke precies de vorige class was en we dan alle classes achter elkaar moeten verwijderen:

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

Gegeven een invoerveld. Controleer bij het verlies van focus of er niet meer dan 9 tekens zijn ingevoerd. Als dat zo is, kleur dan de rand van het invoerveld groen, en zo niet - rood.