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

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

[0xD34F]

Всплывает при нажатии на все кнопки. Но не то, которое надо, а первое. Которое видно только когда отображается первый же .product. Вместо первого .product нужен тот, внутри которого находится нажатая кнопка:

document.querySelector('.wrapper_product') ---> event.target

Comments

[Дмитрий Ярощук]

0xD34F скажите пожалуйста почему нужно навешивать active на button ?
Почему нельзя навешивать на product или wrapper_product чтобы все работало.

[0xD34F]

Дмитрий Ярощук, я не понимаю, о чём вы сейчас говорите. Никаких классов никаким кнопкам нигде не добавляется.

[Дмитрий Ярощук]

0xD34F у меня есть несколько кнопок product_button(Купить) при нажатие на которые появляются разные модальные окна product_congratulations. Я это реализовал таким образом

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);
    }

То есть при нажатию на одну из кнопок product_button(Купить) родителю кнопки product добавляется класс active, следовательно если у родителя product есть класс active то должно появляться модальное окно product_congratulations.
Проблема заключается в том что модальное окно product_congratulations появляется только при нажатие на кнопку product_button(Купить) которая находиться в карточки iPhone, при нажатие на другие кнопки(Купить) в других карточках модальные окна не появляются.
Ваш ответ не помог так как в данном случае класс active добавляется кнопки product_button(Купить) а должен добавляться родителю кнопки product

[0xD34F]

Ваш ответ не помог так как в данном случае класс active добавляется кнопки product_button(Купить) а должен добавляться родителю кнопки product

Дмитрий Ярощук, если ответ не помог, то какого хрена вы его отметили как решение? Объяснитесь.

Ответ бы помог, если бы вы сделали ровно то, что в нём сказано.