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 դաշտ: focus-ը կորցնելուց հետո ստուգեք, որ դրանում մուտքագրված է ոչ ավելի, քան 9 նիշ: Եթե այդպես է, ներկեք input դաշտի եզրագիծը կանաչ գույնով, իսկ եթե ոչ՝ կարմիր: