@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';
        });
    });
  • Вопрос задан
  • 75 просмотров
Решения вопроса 1
vmakhnyuk
@vmakhnyuk
Frontend developer
Я бы советовал повесить 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);
        }
    })
})
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@reinmaker1990
AbaiS почему при клике "купить" не дергать ваши товары из хранилища/БД и передавать выбранные позиции в корзину?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы