kuchuluk
@kuchuluk

Почему js не срабатыват сразу после отрисовки html кода?

Здравствуйте!
Реализую добавление товаров в корзину и отображение списка товаров в корзине в виде модального popup окошка.
Товары добавляются по кнопке в карточке товара:
// добавление товара в корзину по кнопке
const oneProductCardButton = document.querySelectorAll('.products_one_price_card button');

oneProductCardButton.forEach((oneProductCardButtonItem) => {
    oneProductCardButtonItem.addEventListener('click', (event) => {
        product = getProductInfo(oneProductCardButtonItem);
        addProductToCart(product);
        updateCartCoint();
        renderCartOnPage();
    });
});

Функция renderCartOnPage для отрисовки товаров из локального хранилища:
function renderCartOnPage() {
    const cardContent = document.querySelector('.card_popup_container_content');

    // Получите массив корзины из localStorage
    let cart = JSON.parse(localStorage.getItem('cart')) || [];

    if (cart.length > 0) {
        cardContent.innerHTML = cart.map((item) => `
        <div class="cart_content__one">
            <input type="hidden" value="${item.articul}">
            <div class="cart_content__img">
                <img src="/img/products_pictures/${item.img}">
            </div>
            <div class="cart_content__name">${item.name}</div>
            <div class="cart_content__price">${item.price}</div>
            <div class="cart_content__quantity">
                <div class="quantity_minus"><button><i class="fa fa-minus" aria-hidden="true"></i></button></div>
                <div class="quantity_count"><span>${item.quantity}</span></div>
                <div class="quantity_plus"><button><i class="fa fa-plus" aria-hidden="true"></i></button></div>
            </div>
            <div class="cart_content__delete"><i class="fa fa-trash" aria-hidden="true" data-art="${item.articul}"></i></div>
        </div>
        `);

    } else {
        const cardContent = document.querySelector('.card_popup_container_content');
        const div = document.createElement("div");
        div.classList.add('container_content_no_lid');
        cardContent.append(div);
        div.innerHTML = "В корзине нет товаров";
    }
}

Как только добавил товары в корзину и нажал по корзине, они нормально отображаются. Но кнопка удалить товар, кнопки - и + (добавить - отнять) не работают. А если перезагрузить страницу и по новой открыть корзину, то нормально начинают работать.
Вот пример функции прибавления товара:
// добавление еденицы товара при клике по кнопке плюс
const plusButton = document.querySelectorAll(".quantity_plus button");
plusButton.forEach((plusItem) => {
    plusItem.addEventListener('click', (event) => {
        const artInput = plusItem.closest('.cart_content__one').querySelector('input[type="hidden"]');
        let countSpan = plusItem.closest('.cart_content__one').querySelector('.quantity_count span');
        let priceDiv = plusItem.closest('.cart_content__one').querySelector('.cart_content__price');
        const articul = artInput.value;
        plusFunction(articul, countSpan, priceDiv);
    });
});
function plusFunction(articul, countSpan, priceDiv) {
    // Получите массив корзины из localStorage
    let cart = JSON.parse(localStorage.getItem('cart')) || [];

    // Проверьте, существует ли товар с таким артикулом в корзине
    const existingProduct = cart.find(item => item.articul === articul);

    if (existingProduct) {
        // Увеличьте количество товара
        existingProduct.quantity += 1;
        existingProduct.price = Number(existingProduct.price) + Number(existingProduct.startprice);
        let cartNum = document.querySelector('.card__num');
        cartNum.innerHTML = existingProduct.quantity;
        countSpan.innerHTML = existingProduct.quantity;
        priceDiv.innerHTML = existingProduct.price;
    } else {
        alert("нет товара в корзине");
    }

    // Сохраните обновленную корзину в localStorage
    localStorage.setItem('cart', JSON.stringify(cart));
    console.log(cart);
}

Почему они сразу не срабатывают? С чем может быть связано такое поведение? Кто сталкивался?
  • Вопрос задан
  • 122 просмотра
Решения вопроса 1
@maximq
QA Engineer
Срабатывает alert("нет товара в корзине") ?
Попробуйте добавить отладку сюда:
plusButton.forEach((plusItem) => {
    plusItem.addEventListener('click', (event) => {
        console.log("test")
        const artInput = plusItem.closest('.cart_content__one').querySelector('input[type="hidden"]');

Если ивент срабатывает и вызывает функцию, но не выходит алерт "нет товара в корзине", проверьте значение existingProduct
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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