জাভাস্ক্রিপ্টে ক্লাসের অসুবিধা

ধরুন আমাদের কাছে বার্তা স্টাইল করার জন্য বেশ কিছু ক্লাস আছে:

.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-টির বেশি অক্ষর প্রবেশ করানো হয়েছে কিনা। যদি তাই হয়, তবে ইনপুটের বর্ডার সবুজ রঙে রাঙান, আর যদি না হয় - লাল রঙে।