JavaScript හි දින දර්ශන මාරු කිරීමේ දෝෂය

අපි දින දර්ශනය මාරු කිරීම සඳහා ඊතල බොත්තම් සෑදීමට අවශ්‍ය යැයි සිතමු. මෙම අවස්ථාවේදී, සාමාන්‍ය දෝෂ කිහිපයක් සිදු කළ හැකිය. අපි ඒවා බලමු.

අප සතුව මාරු කිරීමේ බොත්තම් සහ අංගයක් ඇතැයි සිතමු, එහිදී සරල බව සඳහා අපි දින දර්ශනයක් නොව, වසර සහ මාසයේ නම පමණක් ප්‍රදර්ශනය කරමු:

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