জাভাস্ক্রিপ্টে ক্যালেন্ডার সুইচ করার ত্রুটি

ধরুন আমরা ক্যালেন্ডার সুইচ করার জন্য তীরচিহ্ন বোতাম তৈরি করতে চাই। এই ক্ষেত্রে বেশ কয়েকটি সাধারণ ত্রুটি করা সম্ভব। আসুন সেগুলি দেখে নেওয়া যাক।

ধরুন আমাদের কাছে সুইচ বোতাম এবং একটি এলিমেন্ট আছে, যেখানে আমরা সরলতার জন্য ক্যালেন্ডার প্রদর্শন করব না, বরং শুধুমাত্র বছর এবং মাসের নাম 출력 করব:

<button id="prev">prev</button>
<div id="elem"></div>
<button id="next">next</button>

আমাদের এলিমেন্টগুলির রেফারেন্স নেওয়া যাক:

let elem = document.querySelector('#elem');
let prev = document.querySelector('#prev');
let next = document.querySelector('#next');

ধরুন আমাদের কাছে একটি ফাংশনও আছে, যা প্যারামিটার হিসাবে মাস নম্বর নেয় এবং এর নাম রিটার্ন করে:

function getMonthName(month) {
	let names = [
		'জানু', 'ফেব্রু', 'মার্চ', 'এপ্রিল', 'মে', 'জুন',
		'জুলাই', 'আগস্ট', 'সেপ্টেম্বর', 'অক্টোবর', 'নভেম্বর', 'ডিসেম্বর'
	];
	
	return names[month];
}

পৃষ্ঠা লোড হওয়ার পর বর্তমান বছর এবং মাস নেওয়া যাক:

let date  = new Date;
let year  = date.getFullYear();
let month = date.getMonth();

আমাদের এলিমেন্টে বছর এবং মাসের নাম আউটপুট করি (ক্যালেন্ডারের অনুকরণ):

elem.textContent = year + ' ' + getMonthName(month);

এবার ক্লিক হ্যান্ডলারগুলি সুইচারগুলিতে সংযুক্ত করা যাক:

prev.addEventListener('click', function() {
	// পূর্ববর্তী মাস দেখানো হচ্ছে
});

next.addEventListener('click', function() {
	// পরবর্তী মাস দেখানো হচ্ছে
});

এখন সুইচারগুলি বাস্তবায়ন করার সময় কোন ত্রুটিগুলি করা যেতে পারে তা বিবেচনা করা যাক।

প্রথম ত্রুটি

ধরুন একজন প্রোগ্রামার মাস সুইচ করার বোতামগুলি এইভাবে বাস্তবায়ন করেছেন:

next.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(month + 1);
});

prev.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(month - 1);
});

যাইহোক, এই প্রোগ্রামার একটি ত্রুটি করেছেন, যার কারণে শুধুমাত্র প্রথম ক্লিকে মাস পরিবর্তন হয়, পরবর্তী ক্লিকগুলিতে হয় না।

ব্যাপারটি হল month ভেরিয়েবলটি ফাংশনের ভিতরে পরিবর্তিত হয় না - এটির বিষয়বস্তুর সাথে শুধু এক যোগ করা হয় এবং ফলাফল getMonthName ফাংশনে পাঠানো হয়।

যেহেতু আমাদের ভেরিয়েবল পরিবর্তিত হয়নি, পরবর্তী ক্লিকেও এতে আগের মতোই বর্তমান মাস থাকবে - এবং কিছুই পরিবর্তন হবে না।

সমস্যাটি ঠিক করা যাক:

next.addEventListener('click', function() {
	month = month + 1;
	elem.textContent = year + ' ' + getMonthName(month);
});

prev.addEventListener('click', function() {
	month = month - 1;
	elem.textContent = year + ' ' + getMonthName(month);
});

সরলীকরণ করা যেতে পারে:

next.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(++month);
});

prev.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(--month);
});

দ্বিতীয় ত্রুটি

প্রায়শই এটি ভুলে যায় যে মাস একটি নির্দিষ্ট সীমার মধ্যে পরিবর্তন হওয়া উচিত - 0 থেকে 11 পর্যন্ত। সীমায় পৌঁছানোর সময় আমাদের বছর পরিবর্তন করতে হবে (সামনে বা পিছনে), এবং মাস প্রারম্ভিক মানে রিসেট করতে হবে।

এটি করা যাক:

next.addEventListener('click', function() {
	if (month === 11) {
		month = 0;
		year++;
	} else {
		month++;
	}
	
	elem.textContent = year + ' ' + getMonthName(month);
});

prev.addEventListener('click', function() {
	if (month === 0) {
		month = 11;
		year--;
	} else {
		month--;
	}
	
	elem.textContent = year + ' ' + getMonthName(month);
});