जावास्क्रिप्ट में कैलेंडर स्विचिंग त्रुटि

मान लीजिए कि हम कैलेंडर स्विच करने के लिए तीर बनाना चाहते हैं। इस मामले में, कई विशिष्ट गलतियाँ की जा सकती हैं। आइए उन पर विचार करें।

मान लीजिए कि हमारे पास स्विच बटन हैं और एक एलिमेंट है, जिसमें सरलता के लिए हम कैलेंडर नहीं, बल्कि केवल वर्ष और महीने का नाम दिखाएंगे:

<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);
});