# Ошибка переключения календаря в 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); });`
← →
↑