Как сделать, чтобы работали все кнопки лайка?

Question

[RLYamakasi]

Плохо разбираюсь в javascript. в моем коде работает только одна кнопка, querySelectorAll не работает

let likes = main.querySelector('.element__button');
function setLike(){
    likes.classList.add('element__button_active');
}

likes.addEventListener('click', setLike)

Answer 1

[Ольга]

querySelectorAll возвращает NodeList, нужно по нему пройтись циклом и дальше уже к каждому элементу применять обработчики. Получится как-то так:

let likes = main.querySelectorAll('.element__button');

for(let i = 0; i < likes .length; i++) {//проходимся циклом
  likes[i].addEventListener('click', function(){
     likes[i].add('element__button_active');
 });
}

Comments

[Сергей Соколов]

разве у NodeList'а, который likes, который возвращает querySelectorAll() — есть свойство classList ?
Посмотрите внимательно функцию setLike()

[Ольга]

Прошу прощения,я обратила внимание только на фразу ,что работает с одним,а с querySelectorAll не работает , соответственно в данном контексте ,если остальное работает по-умолчанию , то проблема с querySelectorAll решается при помощи цикла.

[Сергей Соколов]

Ольга, поправьте, пожалуйста, фразу «querySelectorAll возвращает массив объектов» — это не верно. Возвращается NodeList, он похож на массив, но в нём, например, нет методов массива map(), reduce().

[Ольга]

Сергей Соколов, спасибо

Answer 2

[Сергей Соколов]

main.querySelectorAll('.element__button')
  .forEach(el => el.addEventListener('click', () => el.classList.add('element__button_active')));

Comments

[eeedge]

А что должно вписываться перед . forEach?