Неудобство на класите во JavaScript

Нека имаме неколку класи за стилизирање на пораки:

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

Нека во одреден елемент сме прикажале успешна порака и и доделиле соодветна класа за успех:

elem.classList.add('success');

Нека сега во истиот елемент прикажавме порака за грешка и му доделивме соодветна класа за грешка:

elem.classList.add('error');

Како резултат ќе испадне дека во елементот ќе има две конфликтни една со друга класи:

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

Излегува дека пред додавање на нова класа, ние прво ќе треба да ја отстраниме претходната:

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

Ова не е многу погодно, бидејќи можеби не знаеме која точно беше претходната класа и ќе треба да ги отстраниме сите класи една по една:

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

Даден е input. По губење на фокусот проверете, дали во него се внесени најмногу 9 знаци. Доколку е така, обојте ја границата на инпутот во зелена боја, a доколку не е така - во црвена.