Почему календарь пролистывается один раз и всё?

Question

[Speakermen]

Доброго времени суток не пойму почему по клику отрабатывает только один раз

const nextMonth = () => {
    nowDate.setMonth(nowDate.getMonth() + 1);
    currDay = nowDate.getDate();
    currMonth = nowDate.getMonth();
    currYear = nowDate.getFullYear();

    createCalendar();

$("prev").addEventListener("click", prevMonth, false);
  $("next").addEventListener("click", nextMonth, false);
  };

Старался сделать код более читабельным но while, for заменить на map filter reduce не получилось(

onst calendarWeekdays = () => {
    return `<tr class="days">
  ${days.map((day) => "<th>" + day + "</th>").join("")}
</tr>`;
  };

Answer 1

[Вадим]

удивительно что и 1 раз работает...

$("prev").addEventListener("click", prevMonth, false);
  $("next").addEventListener("click", nextMonth, false);

$("next") - Это что такое? Если следовать правилам, то это "next" это селектор по тэгу. Такого тега не существует.

Аааааа.... Вы решили а почему бы не сделать свою функцию, которая ищёт по id и не назвать её так же как jQuery, чтобы понятно это было только Вам...

Короче у Вас поиск по id который должен быть уникальным на странице.
Обработчик вешается только на первый элемент. Соответственно, работают только стрелочки первого месяца.
Исправляйте на поиск по классу.

Comments

[Speakermen]

Поменял но все равно один раз отрабатывает

const getId = (id) => document.getElementById(id);
  const getClass = (cn) => document.getElementsByClassName(cn);

  const createCalendar = () =>
    calendar(getId("calendar"), currDay, currMonth, currYear);

  createCalendar();

  getClass("prev")[0].addEventListener("click", prevMonth, false);
  getClass("next")[0].addEventListener("click", nextMonth, false);

[Вадим]

Speakermen, А Вы понимаете код, который пишите?
getClass("prev")[0].addEventListener() - навешивает обработчик только на первый райденный элемент, который находится под индексом 0 в списке найденных элементов.

[Speakermen]

Вадим, не совсем понимаю как его дебажить querySelectorAll тоже результатов не дал(

document
    .querySelectorAll(".prev")

NodeList [td#prev.prev]
0
: 
td#prev.prev
length
: 
1
[[Prototype]]
: 
NodeList

[Вадим]

Speakermen, querySelectorAll возвращает набор элементов. Нужно либо обойти весь набор через forEach и на каждый элемент повесить обработчик, либо воспользоваться таким приёмом как делегирование(рекомендуется)

[Speakermen]

Вадим, спасибо в консоль выводится на 3 и более нажатия, но функция отрабатывает только раз(

Я уже и функции переписал безрезультатно

const nextMonth = () => {
    if (currMonth == 11) {
      currMonth = 0;
      currYear = currYear + 1;
    } else {
      currMonth = currMonth + 1;
    }

    createCalendar();
  };

  const prevMonth = () => {
    if (currMonth == 0) {
      currMonth = 11;
      currYear = currYear - 1;
    } else {
      currMonth = currMonth - 1;
    }

    createCalendar();
  };

document.querySelectorAll(".prev").forEach((button) => {
    button.addEventListener("click", prevMonth, false);
  });

  document.querySelectorAll(".next").forEach((button) => {
    button.addEventListener("click", () => {
      console.log("next worked");
    });
  });

[Speakermen]

Вадим, спасибо Вам огромное Вадим делегирование сработало мне как раз это и нужно было для остальных ui