Ulemper med klasser i JavaScript

Lad os sige, at vi har flere klasser til styling af beskeder:

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

Lad os sige, at vi i et element har vist en succesbesked og har tildelt det den tilsvarende klasse for succes:

elem.classList.add('success');

Lad os nu sige, at vi i det samme element viser en fejlbesked og tildeler den den tilsvarende klasse for fejl:

elem.classList.add('error');

Resultatet bliver, at elementet vil have to klasser, der konflikter med hinanden:

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

Det viser sig, at før vi tilføjer en ny klasse, bliver vi nødt til først at fjerne den forrige:

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

Dette er ikke særlig bekvemt, da vi måske ikke ved, hvilken klasse der var den forrige, og vi bliver nødt til at fjerne alle klasser én efter én:

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

Der gives et inputfelt. Ved tab af fokus, kontroller at der ikke er indtastet mere end 9 tegn. Hvis det er tilfældet, farv inputfeltets kant i grøn farve, og hvis ikke - i rød.