Ногунории синфҳо дар JavaScript

Бигзор мо чанд синф барои услубдиҳии паёмҳо дошта бошем:

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

Бигзор дар баъзе элементҳо мо паёми муваффақро баровардаем ва барои он синфи мувофиқи муваффақиятро таъин кунем:

elem.classList.add('success');

Бигзор акнун мо дар ҳамин элемент паёми хаторо баровардаем ва барои он синфи мувофиқи хаторо таъин кунем:

elem.classList.add('error');

Дар натиҷа, дар элемент ду синфи бо ҳамдигар зиддияткунанда вуҷуд хоҳад дошт:

<div id="elem" class="success error">
	матн
</div>

Маълум мешавад, ки пеш аз илова кардани синфи нав, мо бояд аввал синфи қаблиро ҳазв кунем:

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

Ин хеле фоидаовар нест, зеро мо метавонем надонистем, ки синфи қаблии аниқ кадом буд ва мо бояд ҳамаи синфҳоро пай дар пай ҳазв кунем:

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

Инпут дода шудааст. Пас аз гум кардани фокус, тафтиш кунед, ки дар он зиёда аз 9-то рамз ворид нашудааст. Агар чунин бошад, сарҳади инпутро ба ранги сабз кунед, вагарна - ба ранги сурх.