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

Question

Модальное окно 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);
    }

Answer 1

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

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

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

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

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

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

БЛОГ НА HUSL

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

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