Почему модальное окно всплывает только при нажатие на первую кнопку?

Рейтинг: 0Ответов: 1Опубликовано: 18.02.2023

Модальное окно product_congratulations должно всплывать при нажатие на любую кнопку product_button, но оно всплывает только при нажатие на первую кнопку, не могу понять как устранить данную проблему.

Полный код

if (event.target.tagName === 'BUTTON') {
        const currentParentDIV = document.querySelector('.wrapper_product').closest('.product');
        console.log(currentParentDIV);
        currentParentDIV.classList.toggle('active');
        setTimeout(() => {
            document.querySelectorAll('.active').forEach((activeEl) => {
                activeEl.classList.remove('active')
            })
        },3000);
    }

javascript
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

оно всплывает только при нажатие на первую кнопку, не могу понять как устранить данную проблему

Смотри, как я уже писал в комментариях.

const currentParentDIV = document.querySelector('.wrapper_product').closest('.product');

Находит самый первый элемент. А тебе нужно искать родителя относительно кнопки. Т.е. вот так

const currentParentDIV = event.target.closest('.product');

После такой правки у меня в твоем примере "Купить" стало работать у всех пунктов.