Возникла проблема с отправлением содержимого элемента в другой элемент. Как это сделать?

Question

[AbaiS]

Создаю корзину. Нужно, чтобы при нажатии на любую

catalog__item_basket

в корзине создавался элемент с таким же содержанием как и у карточки, в которой она находиться, а сама проблема появилась при попытке вытащить из карточки текст и поместить его в созданную в корзине уже новую карточку.

Карточка:

<div class="catalog-item">
                    <div class="catalog-item_wrapper">
                        <div class="catalog-item_main">
                            <img src="img/boxes/image6.jpeg" alt="" class="catalog-item_img">
                            <div class="catalog-item_name">Коробка бурая + бурое дно</div>
                            <div class="catalog-item_size">230*170*90мм</div>
                            <div class="catalog-item_price">120</div>
                        </div>
                        <hr>
                        <div class="catalog-item_footer">
                            <input type="number" class="catalog-item_input" value="0">
                            <div class="catalog-item_basket"><img src="icons/cart.svg" alt="cart"></div>
                            <div class="wall"></div>
                            <button class="btn btn-mini">Купить</button>
                        </div>
                    </div>
                </div>

Код:

cardBtn = document.querySelectorAll('.catalog__item_basket');

cardBtn.forEach(i => {
        i.addEventListener('click', () => {
            const element = document.createElement('div');

            element.innerHTML = `
                <div class="basket__item">
                    <img src="img/boxes/image6.jpeg" alt="box" class="basket__item-image">
                    <div class="basket__item_wrapper">
                        <div class="basket__item-name">${name}</div>
                        <div class="basket__item-size">${size}</div>
                        <div class="basket__item-price">${price}</div>
                        <div class="basket__item-number">${number}</div>
                    </div>
                </div>
            `;
            document.querySelector('.basket__list').append(element);

            basket.style.display = 'block';
        });
    });

Comments

[Kovalsky]

А что за проблема?

Answer 1

[Валерий]

Я бы советовал повесить data атрибуты для каждогоcatalog-item по типу

<div
    class="catalog-item"
    data-name="Коробка бурая + бурое дно"
    data-size="230*170*90мм"
    data-price="120"
    data-number="1"
>
...
</div>

И делегировать обработку покупки на catalog-item:

const catalogItems = document.querySelectorAll('.catalog-item');
const basketList = document.querySelector('.basket__list');
catalogItems.forEach((catalogItem) => {
    catalogItem.addEventListener("click", (e) => {
        if (e.target.classList.contains("catalog-item_basket") {
            const {name, size, price, number} = catalogItem.dataset;
            const basketItem = document.createElement('div');

            basketItem.innerHTML = `
                <div class="basket__item">
                    <img src="img/boxes/image6.jpeg" alt="box" class="basket__item-image">
                    <div class="basket__item_wrapper">
                        <div class="basket__item-name">${name}</div>
                        <div class="basket__item-size">${size}</div>
                        <div class="basket__item-price">${price}</div>
                        <div class="basket__item-number">${number}</div>
                    </div>
                </div>
            `;

            basketList.append(basketItem);
        }
    })
})

Answer 2

[reinmaker90]

AbaiS почему при клике "купить" не дергать ваши товары из хранилища/БД и передавать выбранные позиции в корзину?