Как правильно использовать querySelectorAll и forEach()?

Question

Я делаю страницу на которую можно добавлять карточки с фото и под ними можно ставить лайки. Мне нужно, чтобы по нажатию на like он становился закрашенным черным.

Свойство для активного like я прописала в селекторе cards__like-icon_active. Функция js должна добавлять этот селектор в код при клике на like. Насколько я понимаю, мне нужно использовать querySelectorAll и forEach() для этого.

Я прописала js таким образом:

let cardsItem = document.querySelectorAll('.cards__item');
let likeIcon = document.querySelector('.cards__like-icon');

cardsItem.forEach(function(likeIcon) {
  likeIcon.addEventListener('click', function(ex) {
    likeIcon.classList.toggle('cards__like-icon_active');
  });
});

<section class="main-content">
  <ul class="cards">
    <li class="cards__item">
      <img class="cards__image" src="./images/karachaevsk.jpg" alt="Изображение храма в Карачаевске">
      <div class="cards__caption">
        <h2 class="cards__title">Карачаевск</h2>
        <button class="cards__like-icon" type="button"></button>
      </div>
    </li>
    <li class="cards__item">
      <img class="cards__image" src="./images/elbrus.jpg" alt="Изображение горы Элюбрус в дали">
      <div class="cards__caption">
        <h2 class="cards__title">Гора Эльбрус</h2>
        <button class="cards__like-icon" type="button"></button>
      </div>
    </li>
    <li class="cards__item">
      <img class="cards__image" src="./images/dombai.jpg" alt="Изображение гор в Домбае">
      <div class="cards__caption">
        <h2 class="cards__title">Домбай</h2>
        <button class="cards__like-icon" type="button"></button>
      </div>
    </li>
    <li class="cards__item">
      <img class="cards__image" src="./images/elbrus.jpg" alt="Изображение горы Элюбрус в дали">
      <div class="cards__caption">
        <h2 class="cards__title">Гора Эльбрус</h2>
        <button class="cards__like-icon" type="button"></button>
      </div>
    </li>
    <li class="cards__item">
      <img class="cards__image" src="./images/dombai.jpg" alt="Изображение гор в Домбае">
      <div class="cards__caption">
        <h2 class="cards__title">Домбай</h2>
        <button class="cards__like-icon" type="button"></button>
      </div>
    </li>
    <li class="cards__item">
      <img class="cards__image" src="./images/karachaevsk.jpg" alt="Изображение храма в Карачаевске">
      <div class="cards__caption">
        <h2 class="cards__title">Карачаево-Черкессия</h2>
        <button class="cards__like-icon" type="button"></button>
      </div>
    </li>
  </ul>
</section>

Но он не работает.

Подскажите, что я делаю не так и как прописать код, чтобы активный like срабатывал на любой из карточки?

Answer 1

Надо пробегаться не по карточкам, а по самим лайкам... собственно:

let cardsItem = document.querySelectorAll('.cards__item');
let likeIcons = document.querySelectorAll('.cards__like-icon');

likeIcons.forEach(function(likeIcon) {
  likeIcon.addEventListener('click', function(ex) {
    likeIcon.classList.toggle('cards__like-icon_active');
  });
});

.cards__like-icon {
  border: 1px solid black;
  width: 20px;
  height: 20px;
}

.cards__like-icon_active {
    background: blue;
}

<section class="main-content">
        <ul class="cards">
          <li class="cards__item">
            <img class="cards__image" src="./images/karachaevsk.jpg" alt="Изображение храма в Карачаевске">
            <div class="cards__caption">
              <h2 class="cards__title">Карачаевск</h2>
              <button class="cards__like-icon" type="button"></button>
            </div>
          </li>
          <li class="cards__item">
            <img class="cards__image" src="./images/elbrus.jpg" alt="Изображение горы Элюбрус в дали">
            <div class="cards__caption">
              <h2 class="cards__title">Гора Эльбрус</h2>
              <button class="cards__like-icon" type="button"></button>
            </div>
          </li>
          <li class="cards__item">
            <img class="cards__image" src="./images/dombai.jpg" alt="Изображение гор в Домбае">
            <div class="cards__caption">
              <h2 class="cards__title">Домбай</h2>
              <button class="cards__like-icon" type="button"></button>
            </div>
          </li>
          <li class="cards__item">
            <img class="cards__image" src="./images/elbrus.jpg" alt="Изображение горы Элюбрус в дали">
            <div class="cards__caption">
              <h2 class="cards__title">Гора Эльбрус</h2>
              <button class="cards__like-icon" type="button"></button>
            </div>
          </li>
          <li class="cards__item">
            <img class="cards__image" src="./images/dombai.jpg" alt="Изображение гор в Домбае">
            <div class="cards__caption">
              <h2 class="cards__title">Домбай</h2>
              <button class="cards__like-icon" type="button"></button>
            </div>
          </li>
          <li class="cards__item">
            <img class="cards__image" src="./images/karachaevsk.jpg" alt="Изображение храма в Карачаевске">
            <div class="cards__caption">
              <h2 class="cards__title">Карачаево-Черкессия</h2>
              <button class="cards__like-icon" type="button"></button>
            </div>
          </li>
        </ul>
      </section>

БЛОГ НА HUSL

Как правильно использовать querySelectorAll и forEach()?

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