Obekvämligheten med klasser i JavaScript

Låt oss säga att vi har flera klasser för att styla meddelanden:

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

Låt oss säga att vi i ett visst element har visat ett framgångsrikt meddelande och tilldelat det motsvarande klass för framgång:

elem.classList.add('success');

Låt oss nu säga att vi i samma element visar ett felmeddelande och tilldelar det motsvarande klass för fel:

elem.classList.add('error');

Som ett resultat kommer elementet att ha två klasser som konflikterar med varandra:

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

Det visar sig att innan vi lägger till en ny klass måste vi först ta bort den föregående:

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

Detta är inte särskilt bekvämt, eftersom vi kanske inte vet exakt vilken klass som var den föregående, och vi måste ta bort alla klasser i följd:

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

Du får en input. Vid förlust av fokus, kontrollera att inte mer än 9 tecken har angetts i den. Om så är fallet, färga inputens kant i grön färg, och om inte - i röd.