জাভাস্ক্রিপ্টে সক্রিয়করণ শৈলী বিকল্প

পূর্ববর্তী পাঠে, আমরা শিখেছি কিভাবে সেগুলিতে ক্লিক করে সেলগুলি সক্রিয় করতে হয়। আসুন এখন এটি করা যাক যাতে রংগুলির বিকল্প হয়: প্রথম সেলটি লাল রং করুক, দ্বিতীয়টি - সবুজে, তৃতীয়টি - আবার লাল এবং এভাবেই চলুক।

এই সমস্যাটি সমাধান করার জন্য আমাদের ইতিমধ্যে দুটি CSS ক্লাসের প্রয়োজন হবে:

.color1 {
	background: red;
}
.color2 {
	background: green;
}

বর্ণিত বিকল্পটি বাস্তবায়ন করা যাক:

let tds = document.querySelectorAll('#table td');

let color = 'color1';
for (let td of tds) {
	td.addEventListener('click', function() {
		if (color == 'color1') {
			color = 'color2'
		} else {
			color = 'color1'
		}
		
		this.classList.add(color);
	});
}

আমার কোডটি বুঝুন, এবং তারপর স্বাধীনভাবে এই কাজের সমাধান পুনরাবৃত্তি করুন।

অ্যারে থেকে অনেক রং বিকল্প করা

এখন ধরুন আমরা শুধু দুটি রং নয়, বরং একটি নির্বিচারে সংখ্যক রং বিকল্প করতে চাই। এর জন্য আসুন CSS ক্লাসগুলির একটি অ্যারে সংরক্ষণ করি:

let colors = ['color1', 'color2', 'color3'];

আসুন আমাদের ক্লাসগুলির রং লিখি:

.color1 {
	background: red;
}
.color2 {
	background: green;
}
.color3 {
	background: yellow;
}

এবং এখন বিকল্পটি বাস্তবায়ন করা যাক:

let tds = document.querySelectorAll('#table td');

let i = 0;
let colors = ['color1', 'color2', 'color3'];

for (let td of tds) {
	td.addEventListener('click', function() {
		this.classList.add(colors[i]);
		
		i++;
		if (i == colors.length) {
			i = 0;
		}
	});
}

আমার দ্বারা উদ্ধৃত কোডটি কীভাবে কাজ করে তা বলুন।