Papërshtatshmëria e Klasave në JavaScript

Le të supozojmë se kemi disa klasa për stilizimin e mesazheve:

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

Le të supozojmë se në një element kemi shfaqur një mesazh suksesi dhe i kemi caktuar klasën përkatëse për sukses:

elem.classList.add('success');

Le të supozojmë se tani në të njëjtin element kemi shfaqur një mesazh gabimi dhe i kemi caktuar klasën përkatëse për gabim:

elem.classList.add('error');

Si rezultat, do të ndodhë që në element do të ketë dy klasa që kundërshtojnë njëra-tjetrën:

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

Rezulton se para shtimit të një klase të re, na duhet fillimisht të heqim klasën e mëparshme:

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

Kjo nuk është shumë e përshtatshme, pasi ne mund të mos e dimë saktësisht se cila ishte klasa e mëparshme dhe do të na duhet të heqim të gjitha klasat njëra pas tjetrës:

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

Jepet një input. Në humbjen e fokusit kontrolloni, nëse janë shënuar jo më shumë se 9 simbole në të. Nëse është kështu, ngjyrosni kufirin e input-it në ngjyrë të gjelbër, ndërsa nëse nuk është kështu - në të kuqe.