ข้อผิดพลาดในการเปลี่ยนปฏิทินใน 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);
});