Нязручнасць класаў у JavaScript

Няхай у нас ёсць некалькі класаў для стылізацыі паведамленняў:

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

Няхай у некаторым элеменце мы вывялі паспяховае паведамленне і назначылі яму адпаведны клас для поспеху:

javascriptelem.classList.add('success');

Няхай цяпер мы ў гэтым жа элеменце вывялі паведамленне пра памылку і назначылі яму адпаведны клас для памылкі:

javascriptelem.classList.add('error');

У выніку атрымаецца, што ў элеменце будзе два канфліктующiх адзін з адным класа:

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

Атрымліваецца, што перад дабаўленнем новага класа, нам прыйдзецца спачатку выдаліць папярэдні:

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

Гэта не вельмі зручна, так як мы можам не ведаць, які менавіта быў папярэдні клас і нам прыйдзецца выдаляць усе класы папарадку:

javascriptelem.classList.remove('success');
elem.classList.remove('warning');
elem.classList.add('error');
Задание 1

Дадзены інпут. Па страце фокусу праверце, што ў яго ўведзена не больш 9-ці сімвалаў. Калі гэта так, афарбуйце мяжу інпута ў зялёны колер, а калі не так - у чырвоны.