Хатои табдили календар дар 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);
});