Lỗi chuyển đổi lịch trong JavaScript

Giả sử chúng ta muốn tạo các mũi tên để chuyển đổi lịch. Trong trường hợp này, có thể mắc phải một số lỗi đặc trưng. Hãy cùng xem xét chúng.

Giả sử chúng ta có các nút chuyển đổi và một phần tử mà để đơn giản chúng ta sẽ hiển thị không phải lịch, mà chỉ là năm và tên tháng:

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

Lấy tham chiếu đến các phần tử của chúng ta:

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

Giả sử chúng ta cũng có một hàm, nhận tham số là số tháng và trả về tên của nó:

function getMonthName(month) {
	let names = [
		'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6',
		'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'
	];
	
	return names[month];
}

Hãy lấy năm và tháng hiện tại ngay khi trang được tải:

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

Hiển thị trong phần tử của chúng ta năm và tên tháng (mô phỏng lịch):

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

Bây giờ hãy gán trình xử lý sự kiện click vào các nút chuyển đổi:

prev.addEventListener('click', function() {
	// hiển thị tháng trước
});

next.addEventListener('click', function() {
	// hiển thị tháng tiếp theo
});

Bây giờ chúng ta hãy xem xét những lỗi có thể mắc phải khi triển khai bộ chuyển đổi.

Lỗi thứ nhất

Giả sử một lập trình viên nào đó đã triển khai các nút chuyển đổi tháng như sau:

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

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

Tuy nhiên, lập trình viên này đã mắc lỗi, do đó tháng chỉ chuyển đổi ở lần nhấp đầu tiên, nhưng không chuyển đổi ở các lần sau.

Vấn đề là biến month không thay đổi bên trong các hàm - người ta chỉ cộng thêm một vào nội dung của nó và gửi kết quả đến hàm getMonthName.

Vì biến của chúng ta không thay đổi, nên ở lần nhấp tiếp theo, trong biến đó vẫn sẽ là tháng hiện tại - và không có gì thay đổi.

Hãy sửa vấn đề:

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

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

Có thể đơn giản hóa:

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

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

Lỗi thứ hai

Người ta thường quên rằng tháng phải thay đổi trong một phạm vi nhất định - từ 0 đến 11. Khi đạt đến giới hạn của phạm vi chúng ta phải thay đổi năm (tăng hoặc giảm), và đặt lại tháng về giá trị ban đầu.

Hãy thực hiện điều này:

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