Как при клике на блок добавить класс к одному из списка элементов?

Question

[TipTop89]

Подскажите почему при клике на menu__list класс _active добавляется, но потом при клике на li выдает ошибку. А нужно что-бы при клике на menu__list класс _active добавлялся к первому li, и дальше при клике на li класс _active был только у кликнутого li. Строго не судите, я новичек в js. Спасибо

const catalogMenu = document.querySelector('.menu__list');
        const catalogMenuItem = document.querySelectorAll('.menu__item');

catalogMenu.addEventListener("click", function (e) {
                    catalogMenuItem.forEach(item => {
item.classList.add('_active')
                        item.forEach(el => { el.classList.remove('_active'); });
                    });
                });

.menu__list{
  padding: 10px;
cursor: pointer;
  color: #000000;
}

.menu__item._active{
  color: red;
}

.menu__item{
  cursor: pointer;
  color: #000000;
}

<div class="menu__list">КЛИК</div>
<ul>
  <li class="menu__item">LOREM</li>
  <li class="menu__item">LOREM</li>
  <li class="menu__item">LOREM</li>
  <li class="menu__item">LOREM</li>
  <li class="menu__item">LOREM</li>
  <li class="menu__item">LOREM</li>
</ul>

Comments

[v3shin]

item.forEach(el => { el.classList.remove('_active'); });

- что перебирает эта строка?

Answer 1

[htmlclassic]

в след раз лучше на кодопен кидай свой код

https://codepen.io/htmlclassic/pen/yLEPXav

Comments

[TipTop89]

Спасибо!!!))