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

Question

Подскажите почему при клике на 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>

Answer 1

Я думаю так будет проще.

const links = document.querySelectorAll('.menu__item');

for (let link of links) {
  link.addEventListener('click', () => {
    let activeLink = document.querySelector('.menu__item._active');
    if (activeLink) {
      activeLink.classList.remove('_active');
    }
    link.classList.add('_active');
  })
}

.menu__list {
  background: red;
  padding: 10px;
}

.menu__item._active {
  color: #ffffff;
}

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

<ul class="menu__list">
  <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>

БЛОГ НА HUSL

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

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