Не появляется класс при клике

Question

Описание для понимания: есть класс modal__menu__text, при клике на который у соседнего (ни дочерний, ни родительский) класса modal__menu__inner__list появлялся класс list__show, меняющий дисплей c display: none на display: flex.

Но при клике меня в консоли ошибка следующего характера:

Uncaught TypeError: Cannot read properties of undefined (reading 'toggle') at HTMLParagraphElement.

Я примерно понимаю контект ошибки, но не знаю, как её исправить и привести код в рабочее состояние. Подскажите, пожалуйста, укажите на ошибки

let listBtn = document.querySelectorAll(".modal__menu__inner__list");
let clickBtn = document.querySelectorAll(".modal__menu__text");

for (let element of clickBtn) {
  element.addEventListener("click", function () {
    listBtn.classList.toggle("list__show");
  });
}

console.log("success");

      .modal__menu {
        margin: 35px 0 0 20px;
        display: flex;
        justify-content: flex-start;

        .modal__menu__content {
          width: 300px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: start;
          list-style-type: none;

          .modal__menu__content__text {
            border: 1px solid #e6e6e6;
            border-left: none;
            border-right: none;

            .modal__menu__text {
              font-family: "Montserrat";
              font-style: normal;
              font-weight: 600;
              font-size: 16px;
              line-height: 46px;
              color: #000000;
            }

            .modal__menu__text:active {
              color: #1277d3;
            }

            .modal__menu__inner__list {
              display: none;
              flex-direction: column;
              gap: 10px;
              list-style-type: none;
              margin-bottom: 10px;
              font-weight: 400;
              font-size: 14px;
              line-height: 36px;
              transition: 0.4s ease;
            }

            .modal__menu__inner__list.list__show {
              display: flex;
            }
          }

          .modal__menu__content__text:nth-child(1) {
            border: none;
          }

          .modal__menu__content__text:nth-child(3) {
            border-top: none;
          }

          .modal__menu__content__text:nth-child(4) {
            border: none;
          }

          .modal__menu__content__contacts {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: flex-start;
            margin-top: 30px;

            p {
              font-weight: 700;
              font-size: 22px;
              line-height: 36px;
              text-transform: uppercase;
              color: #000000;
            }
          }
        }
      }

<div class="modal__menu">
          <ul class="modal__menu__content">
            <li class="modal__menu__content__text">
              <p class="modal__menu__text">Услуги</p>
              <ul class="modal__menu__inner__list">
                <li>Банкротство физических лиц</li>
                <li>Банкротство юридических лиц</li>
                <li>Защита от коллекторов</li>
                <li>Кредитные споры</li>
                <li>Семейные споры</li>
                <li>Судебная защита</li>
              </ul>
            </li>
            <li class="modal__menu__content__text">
              <p class="modal__menu__text">О нас</p>
              <ul class="modal__menu__inner__list">
                <li>Банкротство физических лиц</li>
                <li>Банкротство юридических лиц</li>
                <li>Защита от коллекторов</li>
                <li>Кредитные споры</li>
                <li>Семейные споры</li>
                <li>Судебная защита</li>
              </ul>
            </li>
            <li class="modal__menu__content__text">
              <p class="modal__menu__text">Отзывы и практика</p>
              <ul class="modal__menu__inner__list">
                <li>Банкротство физических лиц</li>
                <li>Банкротство юридических лиц</li>
                <li>Защита от коллекторов</li>
                <li>Кредитные споры</li>
                <li>Семейные споры</li>
                <li>Судебная защита</li>
              </ul>
            </li>
            <li class="modal__menu__content__text">
              <p class="modal__menu__text">Контакты</p>
              <ul class="modal__menu__inner__list">
                <li>Банкротство физических лиц</li>
                <li>Банкротство юридических лиц</li>
                <li>Защита от коллекторов</li>
                <li>Кредитные споры</li>
                <li>Семейные споры</li>
                <li>Судебная защита</li>
              </ul>
            </li>
            <li class="modal__menu__content__contacts">
              <img src="./img/whatsapp.svg" alt="" />
              <p class="modal__menu__text">8 800 222 26 94</p>
            </li>
          </ul>
        </div>

Answer 1

По-вашему кто такой listBtn внутри вашего слушателя и зачем вы их вообще собирали?.)

Самодостаточный и рабочий JS в вашем случае должен выглядеть как-то так:

let clickBtn = document.querySelectorAll(".modal__menu__text");

for (let element of clickBtn) {
  element.addEventListener("click", function (el) {
    el.target.classList.toggle("list__show"); // добавит/удалит стиль на самом элементе
  });
}

Или такой вариант, который добавит/удалит стиль к родительскому 'li' возможно это вы и хотели?

el.target.parentNode.classList.toggle("list__show");

Однако согласно вашим пожеланиям c текущим SCSS желаемый функционал, хотя и будет рабочим, но так и останется бесполезным. Сожалею, но именно из-за бессмысленного нагромождения вложений я не смог понять что именно вы хотите сделать.

И тот и другой вариант можно стилизовать до рабочего состояния.

Answer 2

Вы пытаетесь достучаться к classList самого псевдомассива, а у него его нет, вам даже ошибка об этом говорит. Вот, перепишите вот таким образом, и заработает так как вам нужно.

let listBtn = document.querySelectorAll('.modal__menu__inner__list');
let clickBtn = document.querySelectorAll('.modal__menu__content__text');

clickBtn.forEach((btn, i) => {
  btn.addEventListener('click', () => {
    listBtn[i].classList.toggle('list__show');
  });
});
console.log('success');

БЛОГ НА HUSL

Не появляется класс при клике

Ответы (2 шт):