Ошибка при выборе всех элементов querySelectorAll. Как найти решение?

Question

[LI4NOOST]

<section class="elements">
            <div class="card">
                <img src="./images/jpg/kirill-pershin-1088404-unsplash.jpg" alt="Карачевск" class="card_image">
                <div class="card__bottom">
                    <h2 class="card__title">Карачевск</h2>
                    <img src="./images/vector/card__like.svg" alt="Лайк" class="card__button-like ">

                </div>
            </div>
            <div class="card">
                <img src="./images/jpg/elbrus.jpg" alt="Эльбрус" class="card_image">
                <article class="card__bottom">
                    <h2 class="card__title">Гора Эльбрус</h2>
                    <img src="./images/vector/card__like.svg" alt="Лайк" class="card__button-like">
                </article>
            </div>
            <div class="card">
                <img src="./images/jpg/dombai.jpg" alt="Домбай" class="card_image">
                <article class="card__bottom">
                    <h2 class="card__title">Домбай</h2>
                    <img src="./images/vector/card__like.svg" alt="Лайк" class="card__button-like">
                </article>
            </div>
            <div class="card">
                <img src="./images/jpg/elbrus.jpg" alt="Эльбрус" class="card_image">
                <article class="card__bottom">
                    <h2 class="card__title">Гора Эльбрус</h2>
                    <img src="./images/vector/card__like.svg" alt="Лайк" class="card__button-like">
                </article>
            </div>
            <div class="card">
                <img src="./images/jpg/dombai.jpg" alt="Домбай" class="card_image">
                <article class="card__bottom">
                    <h2 class="card__title">Домбай</h2>
                    <img src="./images/vector/card__like.svg" alt="Лайк" class="card__button-like">
                </article>
            </div>
            <div class="card">
                <img src="./images/jpg/kirill-pershin-1088404-unsplash.jpg" alt="Карачаево-Черкессия" class="card_image">
                <article class="card__bottom">
                    <h2 class="card__title">Карачаево-Черкессия</h2>
                    <img src="./images/vector/card__like.svg" alt="Лайк" class="card__button-like">
                </article>
            </div>
        </section>

let page = document.querySelector('.page')
let wrapper = page.querySelector('.wrapper')
let editButton = wrapper.querySelector('.profile__edit-button')
let menu = document.querySelector('.menu')
let saveButton = menu.querySelector('.menu__button')
let closeButton = menu.querySelector('.close-icon')
let overlay = page.querySelector('.overlay')
let like = document.querySelectorAll('.card__button-like')

function addMenu() {
    menu.classList.add('menu-active');
    overlay.classList.add('overlay_active')
}

function closeMenu() {
    menu.classList.remove('menu-active');
    overlay.classList.remove('overlay_active')
}

function editProfile() {
    let textName = document.querySelector('.menu__name').value
    document.querySelector('.profile__name').innerHTML = textName
    let textSubtitle = document.querySelector('.menu__subtitle').value
    document.querySelector('.profile__subtitle').innerHTML = textSubtitle
}

function likeActive(){
    like.classList.toggle('card__button-like_active')
}


like.addEventListener ('click', likeActive);
closeButton.addEventListener('click', closeMenu);
editButton.addEventListener('click', addMenu);
saveButton.addEventListener('click', closeMenu);
saveButton.addEventListener('click', editProfile)

.card__button-like {
    cursor: pointer;
    
}

.card__button-like_active{
    margin-top: 7px;
    background-repeat: no-repeat;
    background-image: url(/images/vector/like__active.svg);
}

.card__button-like:hover {
    opacity: 0.6;
}

Хочу, что бы при нажатии на кнопку всем элементам добавлялся "card__button-like" добавлялся класс "card__button-like_active", если использовать querySelector работает, но только на один элемент, когда пытаюсь выбрать все элементы с таким классом выдает ошибку. Объясните, пожалуйста, что именно происходит и как найти решение. Всем спасибо
"script.js:32 Uncaught TypeError: like.addEventListener is not a function
at script.js:32:6"

Answer 1

[ForSureN1]

Здесь вы получаете коллекцию элементов, а не 1

let like = document.querySelectorAll('.card__button-like')

,отсюда и ошибка на этом моменте
like.addEventListener ('click', likeActive);
Вы пытаетесь повешать обработчик на массив элементов, а не сами элементы
поэтому перед этим нужно сделать цикл, внутри которого вы будете вешать обработчик на элементы

like.forEach( item => { item.addEventListener('click', likeActive ) } )

Comments

[LI4NOOST]

Спасибо, но теперь начал выдавать ошибку
script.js:31 Uncaught TypeError: like.forEach is not a function
at script.js:31:6

[ForSureN1]

function likeActive(){
    like.classList.toggle('card__button-like_active')
}

Здесь вы тоже пытаетесь к массиву элементов применить метод ClassList который применим только к элементам, а не массивам и пр.

[LI4NOOST]

ForSureN1, Понял. Спасибо, буду думать как исправить