जावास्क्रिप्ट में कक्षाओं की असुविधा

मान लीजिए कि हमारे पास संदेशों को स्टाइल करने के लिए कई कक्षाएं हैं:

.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');

एक इनपुट दिया गया है। फोकस खोने पर जांचें कि इसमें 9 से अधिक वर्ण नहीं दर्ज किए गए हैं। यदि ऐसा है, तो इनपुट की सीमा को हरे रंग में रंगें, और यदि ऐसा नहीं है - तो लाल रंग में।