Проблема с переключением классов в JavaScript

Оффтоп javascript
1

Привет всем! У меня возникла проблема с JavaScript кодом для переключения классов элемента. Вот упрощенный вариант:

function переключитьКомментарии() {
  function изменитьВидимость() {
    var блокКомментариев = document.querySelector('aside');
    блокКомментариев.classList.toggle('скрыть');
  }
  
  var кнопкаПереключения = document.getElementById('кнопка-комментариев');
  кнопкаПереключения.addEventListener('click', изменитьВидимость);
}

document.addEventListener('DOMContentLoaded', переключитьКомментарии);

Код работает только один раз при первом клике. После этого класс больше не переключается. Может кто-нибудь подсказать, в чем может быть проблема? Буду благодарен за любую помощь!

2

Проблема может быть в том, что функция изменитьВидимость создается заново при каждом вызове переключитьКомментарии. Попробуй вынести ее за пределы переключитьКомментарии. Еще вариант - использовать arrow function для обработчика клика. Так код должен сработать правильно. А вообще, интересная задача! Ты часто работаешь с манипуляцией DOM?

3

Твоя проблема скорее всего в области видимости. Функция изменитьВидимость объявлена внутри переключитьКомментарии, поэтому при каждом клике создается новая. Вынеси ее наружу:

function изменитьВидимость() {
  var блокКомментариев = document.querySelector('aside');
  блокКомментариев.classList.toggle('скрыть');
}

function переключитьКомментарии() {
  var кнопкаПереключения = document.getElementById('кнопка-комментариев');
  кнопкаПереключения.addEventListener('click', изменитьВидимость);
}

Так должно заработать как надо. Удачи с проектом!