Ketidakselesaan Kelas dalam JavaScript

Katakan kita mempunyai beberapa kelas untuk menggayakan mesej:

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

Katakan dalam suatu elemen kita memaparkan mesej kejayaan dan menetapkan kelas yang sepadan untuk kejayaan:

elem.classList.add('success');

Katakan sekarang dalam elemen yang sama kita memaparkan mesej ralat dan menetapkan kelas yang sepadan untuk ralat:

elem.classList.add('error');

Hasilnya, elemen tersebut akan mempunyai dua kelas yang berkonflik antara satu sama lain:

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

Jadi, sebelum menambah kelas baru, kita perlu membuang kelas sebelumnya terlebih dahulu:

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

Ini agak menyusahkan, kerana kita mungkin tidak tahu kelas apakah yang sebelumnya dan kita terpaksa membuang semua kelas satu persatu:

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

Diberi satu input. Apabila kehilangan fokus, semak sama ada tidak lebih daripada 9 aksara dimasukkan ke dalamnya. Jika ya, warnakan sempadan input dengan warna hijau, dan jika tidak - dengan warna merah.