Как сделать смену класса и картинки при клике?

Question

[powerg1980]

Есть картинки, при клике на цвет картинки меняются. Подскажите пожалуйста как сделать так что-бы _аctive и картинка менялись при клике. Код работает, но только если цвета и стили кнопок задать через псевдоклассы, как только внутрь button добавляешь класс код перестает работать, но цвет кнопки нужно вывести через html, поэтому псевдоклассы не подходят. Спасибо

Answer 1

[Чипекве]

Атрибут src у button нужно переименовать в data-src, чтобы получать его через dataset.

document.addEventListener('click', switchColorButtonHandler);

function switchColorButtonHandler({ target }) {
    const clickedButton = target.closest('.slide-product__options');
    if (!clickedButton) return;

    const productWrapper = clickedButton.closest('.slide-product__image');
    const productImage = productWrapper.querySelector('.picture img');

    productWrapper.querySelectorAll('button').forEach(button => {
        button.classList.remove('_active');
    });
    clickedButton.classList.add('_active');

    productImage.src = clickedButton.dataset.src;
}