Функция лайк для других блоков

Question

помогите решить (господи помилуй) есть 6 кнопок лайк нажимаю на 1 цвет меняется на другую(это работает) почему то для других оставшиеся он не хочет работать

https://codepen.io/Covid-19-create/pen/KKdEqbw

const like = document.querySelector('.element__heart')
like.addEventListener('click', function(evt) {
    evt.target.classList.toggle('element__heart_like')
});

.element__heart {
    margin: 31px 22px 30px 0;
    
    background-color: red;
    background-position: center;
    background-repeat: no-repeat;
    border: 0;
    width: 21px;
    height: 18px;
}

.element__heart_like {
    background-color: green;
    background-repeat: no-repeat;
    background-position: center;
}

<button class="element__heart" type="button"></button>
<button class="element__heart" type="button"></button>
<button class="element__heart" type="button"></button>
<button class="element__heart" type="button"></button>
<button class="element__heart" type="button"></button>
<button class="element__heart" type="button"></button>

Answer 1

querySelector выбирает только первый элемент, который соответствует селектору, для выбора всех элементов, соответствующих селектору следует использовать querySelectorAll.

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

const like = document.querySelectorAll('.element__heart');
like.forEach(function(el) {
  el.addEventListener('click', function(evt) {
      evt.target.classList.toggle('element__heart_like');
  });
});

Answer 2

В случаях со списками лучше использовать делегирование - вешать обработчик клика на родительский элемент и проверять событие по event.target

const wrapper = document.querySelector('.buttons-wrap')

wrapper.addEventListener('click', function(e) {
    if (e.target.classList.contains('element__heart')){
      e.target.classList.toggle('element__heart_like')
    }
});

.element__heart {
    margin: 31px 22px 30px 0;
    
    background-color: red;
    background-position: center;
    background-repeat: no-repeat;
    border: 0;
    width: 21px;
    height: 18px;
}

.element__heart_like {
    background-color: green;
    background-repeat: no-repeat;
    background-position: center;
}

<div class="buttons-wrap">
  <button class="element__heart" type="button"></button>
  <button class="element__heart" type="button"></button>
  <button class="element__heart" type="button"></button>
  <button class="element__heart" type="button"></button>
  <button class="element__heart" type="button"></button>
  <button class="element__heart" type="button"></button>
</div>

БЛОГ НА HUSL

Функция лайк для других блоков

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