Ralat Penukaran Kalendar dalam JavaScript

Katakan kita mahu membuat anak panah untuk menukar kalendar. Dalam kes ini, beberapa ralat biasa boleh dilakukan. Mari kita lihatnya.

Katakan kita mempunyai butang penukaran dan elemen, yang untuk kesederhanaan kita akan paparkan bukan kalendar, tetapi hanya tahun dan nama bulan:

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

Dapatkan rujukan kepada elemen kami:

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

Katakan kita juga mempunyai fungsi, yang menerima nombor bulan sebagai parameter dan mengembalikan namanya:

function getMonthName(month) {
	let names = [
		'Jan', 'Feb', 'Mac', 'Apr', 'Mei', 'Jun',
		'Jul', 'Ogo', 'Sep', 'Okt', 'Nov', 'Dis'
	];
	
	return names[month];
}

Mari dapatkan tahun dan bulan semasa apabila halaman dimuatkan:

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

Mari paparkan tahun dan nama bulan dalam elemen kami (imitasi kalendar):

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

Sekarang mari tambahkan pemproses klik pada penukar:

prev.addEventListener('click', function() {
	// tunjuk bulan sebelumnya
});

next.addEventListener('click', function() {
	// tunjuk bulan seterusnya
});

Sekarang pertimbangkan ralat yang boleh dilakukan semasa melaksanakan penukar.

Ralat pertama

Katakan seorang pengaturcara melaksanakan butang penukaran bulan seperti berikut:

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

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

Walau bagaimanapun, pengaturcara ini melakukan ralat, yang menyebabkan bulan ditukar hanya pada klik pertama, tetapi tidak pada klik seterusnya.

Masalahnya ialah pembolehubah month tidak berubah dalam fungsi - kandungannya hanya ditambah dengan satu dan hasilnya dihantar ke fungsi getMonthName.

Oleh kerana pembolehubah kami tidak berubah, maka pada klik seterusnya, ia masih akan mengandungi bulan semasa - dan tiada apa akan berubah.

Mari betulkan masalah ini:

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

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

Boleh dipermudahkan:

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

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

Ralat kedua

Sering kali, kita lupa bahawa bulan harus berubah dalam julat tertentu - dari 0 hingga 11. Apabila mencapai had julat, kita mesti menukar tahun (ke hadapan atau ke belakang), dan menetapkan semula bulan kepada nilai permulaan.

Mari lakukan ini:

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