Inconveniența claselor în JavaScript

Să presupunem că avem mai multe clase pentru stilizarea mesajelor:

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

Să presupunem că într-un anumit element am afișat un mesaj de succes și i-am atribuit clasa corespunzătoare pentru succes:

elem.classList.add('success');

Să presupunem că acum în același element am afișat un mesaj de eroare și i-am atribuit clasa corespunzătoare pentru eroare:

elem.classList.add('error');

Ca urmare, se va dovedi că în element vor fi două clase care intră în conflict una cu cealaltă:

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

Se dovedește că, înainte de a adăuga o nouă clasă, va trebui mai întâi să eliminăm clasa anterioară:

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

Acest lucru nu este foarte convenabil, deoarece este posibil să nu știm care a fost exact clasa anterioară și va trebui să eliminăm toate clasele una după alta:

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

Este dat un câmp de introducere. La pierderea focusului, verificați că în el sunt introduse nu mai mult de 9 caractere. Dacă este așa, colorați bordura câmpului în verde, iar dacă nu - în roșu.