Kesalahan Pengalihan Kalender dalam JavaScript

Misalkan kita ingin membuat tombol panah untuk mengalihkan kalender. Dalam hal ini, sejumlah kesalahan khas dapat terjadi. Mari kita bahas kesalahan-kesalahan tersebut.

Misalkan kita memiliki tombol pengalihan dan elemen, yang untuk mempermudah, kita akan menampilkan bukan kalender, tapi hanya tahun dan nama bulan:

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

Mari dapatkan referensi ke elemen kita:

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

Misalkan kita juga memiliki fungsi, yang menerima parameter nomor bulan dan mengembalikan namanya:

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

Mari saat halaman dimuat, dapatkan tahun dan bulan saat ini:

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

Tampilkan di elemen kita tahun dan nama bulan (imitasi kalender):

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

Sekarang mari pasang penangan klik pada tombol pengalih:

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

next.addEventListener('click', function() {
	// tampilkan bulan berikutnya
});

Sekarang mari pertimbangkan kesalahan apa yang dapat terjadi saat mengimplementasikan pengalih.

Kesalahan pertama

Misalkan seorang programmer mengimplementasikan tombol pengalihan bulan sebagai berikut:

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

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

Namun, programmer ini melakukan kesalahan, yang menyebabkan bulan beralih hanya pada klik pertama, tapi tidak pada klik berikutnya.

Masalahnya adalah variabel month tidak berubah di dalam fungsi - isinya hanya ditambah satu dan hasilnya dikirim ke fungsi getMonthName.

Karena variabel kita tidak berubah, maka pada klik berikutnya, di dalamnya akan tetap berisi bulan saat ini - dan tidak ada yang akan berubah.

Mari perbaiki masalahnya:

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

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

Dapat disederhanakan:

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

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

Kesalahan kedua

Sering kali dilupakan bahwa bulan harus berubah dalam rentang tertentu - dari 0 hingga 11. Saat mencapai batas rentang, kita harus mengubah tahun (maju atau mundur), dan mengatur ulang bulan ke nilai awal.

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