Ulemper med klasser i JavaScript

La oss si at vi har flere klasser for stiling av meldinger:

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

La oss si at vi i et element har vist en vellykket melding og tildelt det tilsvarende klasse for suksess:

elem.classList.add('success');

La oss si at vi nå i samme element viste en feilmelding og tildelte det tilsvarende klasse for feil:

elem.classList.add('error');

Resultatet blir at elementet vil ha to klasser som konflikter med hverandre:

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

Det viser seg at før vi legger til en ny klasse, må vi først fjerne den forrige:

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

Dette er ikke veldig praktisk, ettersom vi kanskje ikke vet hvilken klasse som var den forrige, og vi må fjerne alle klasser på rad:

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

Gitt et inputfelt. Ved tap av fokus, sjekk at det ikke er skrevet inn mer enn 9 tegn. Hvis det er tilfelle, fargelegg rammen til inputfeltet i grønn farge, og hvis ikke - i rød.