JavaScript တွင် ပြက္ခဒိန် ပြောင်းလဲရာတွင် ဖြစ်တတ်သောအမှား

ကျွန်ုပ်တို့သည် ပြက္ခဒိန်အား ပြောင်းလဲရန် မြှားခလုတ်များ ပြုလုပ်လိုသည်ဆိုပါစို့။ ထိုသို့ဖြစ်လျှင် ထူးခြားသောအမှားများစွာ ကျူးလွန်နိုင်သည်။ ယင်းတို့ကို ကြည့်ရှုကြပါစို့။

ကျွန်ုပ်တို့တွင် ပြောင်းလဲရန် ခလုတ်များနှင့် အလွယ်တကူအတွက် ပြက္ခဒိန်ကို မထည့်ဘဲ ခုနှစ်နှင့် လ၏အမည်ကိုသာ ထုတ်ပြမည့် element တစ်ခု ရှိသည်ဆိုပါစို့-

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

ကျွန်ုပ်တို့၏ element များအတွက် reference များရယူကြပါစို့-

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

ထို့အပြင် ကျွန်ုပ်တို့တွင် function တစ်ခုရှိပါစို့၊ ထို function သည် parameter အဖြစ် လ၏နံပါတ်ကို လက်ခံပြီး ၎င်း၏အမည်ကို ပြန်ပေးသည်-

function getMonthName(month) {
	let names = [
		'ဇန်နဝါရီ', 'ဖေဖော်ဝါရီ', 'မတ်', 'ဧပြီ', 'မေ', 'ဇွန်',
		'ဇူလိုင်', 'ဩဂုတ်', 'စက်တင်ဘာ', 'အောက်တိုဘာ', 'နိုဝင်ဘာ', 'ဒီဇင်ဘာ'
	];
	
	return names[month];
}

စာမျက်နှာ load ပြီးသည်နှင့် လက်ရှိခုနှစ်နှင့် လကို ရယူကြပါစို့-

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

ကျွန်ုပ်တို့၏ element ထဲသို့ ခုနှစ်နှင့် လ၏အမည်ကို ထည့်သွင်းပါမည် (ပြက္ခဒိန်၏ အစားထိုးပုံစံ)-

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 variable သည် function များအတွင်းတွင် မပြောင်းလဲပါ - ၎င်း၏တန်ဖိုးအား တစ်ထပ်ပေါင်းထည့်ပြီး ရလဒ်ကို getMonthName function ထဲသို့ ပို့လိုက်ခြင်းသာ ဖြစ်သည်။

ကျွန်ုပ်တို့၏ variable သည် မပြောင်းလဲသောကြောင့်၊ နောက်ထပ် ကလစ်တစ်ချက်တွင် ၎င်းထဲ၌ ဆက်လက်၍ လက်ရှိလကိုသာ ရှိနေမည်ဖြစ်ပြီး ဘာမှ မပြောင်းလဲပါ။

ပြဿနာကို ပြင်ဆင်ကြပါစို့-

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