Die ongemaklikheid van klasse in JavaScript

Gestel ons het verskeie klasse vir die stilering van boodskappe:

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

Gestel ons het 'n suksesvolle boodskap in 'n element uitgestuur en dit die ooreenstemmende suksesklas toegeken:

elem.classList.add('success');

Gestel ons het nou 'n foutboodskap in dieselfde element uitgestuur en dit die ooreenstemmende foutklas toegeken:

elem.classList.add('error');

Die gevolg sal wees dat die element twee klasse sal hê wat met mekaar bots:

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

Dit beteken dat ons voor die byvoeging van 'n nuwe klas, eers die vorige een moet verwyder:

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

Dit is nie baie gerieflik nie, aangesien ons dalk nie weet watter spesifieke klas voorheen was nie, en ons sal alle klasse een vir een moet verwyder:

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

Gegee 'n invoerveld. Met fokusverlies, kontroleer of daar nie meer as 9 simbole daarin ingevoer is nie. Indien wel, verf die rand van die invoerveld in groen kleur, en indien nie - in rooi.