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

Question

[Руслан]

Здравствуйте!
Реализую добавление товаров в корзину и отображение списка товаров в корзине в виде модального 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);
}

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

Comments

[Mikhail Osher]

оффтоп: почтайте про делегацию событий https://learn.javascript.ru/event-delegation, очень полезная штука

Answer 1

[Максим Д.]

Срабатывает alert("нет товара в корзине") ?
Попробуйте добавить отладку сюда:

plusButton.forEach((plusItem) => {
    plusItem.addEventListener('click', (event) => {
        console.log("test")
        const artInput = plusItem.closest('.cart_content__one').querySelector('input[type="hidden"]');

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

Comments

[Руслан]

добавил

plusItem.addEventListener('click', (event) => {
        console.log("test")

не срабатывает он

[Максим Д.]

Руслан, у вас проблема в том, что кнопки отрисовываются в корзине после появления товара в ней. На этот момент цикл plusButton.forEach((plusItem) уже сделал свою работу по пустому массиву (т.к. не нашёл кнопок)

Перенесите часть кода по обработке кнопок в функцию 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>
        `);
        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);
           });
        });
    } 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 = "В корзине нет товаров";
    }
}

[Руслан]

maximq, попробовал и так, попробовал уже и в самое начало скрипта переместить код. Не работает и все тут.
Переписал уже этот код так:

cardContent.innerHTML = "";
        cart.map(item => {
            const cartContentOne = document.createElement('div');
            cartContentOne.className = 'cart_content__one';

            const hiddenInput = document.createElement('input');
            hiddenInput.type = "hidden";
            hiddenInput.value = item.articul;
            cartContentOne.appendChild(hiddenInput);

            const imgDiv = document.createElement('div');
            imgDiv.className = 'cart_content__img';
            const productImg = document.createElement('img');
            productImg.src = "/img/products_pictures/" + item.img;
            imgDiv.appendChild(productImg);
            cartContentOne.appendChild(imgDiv);

            const cartContentName = document.createElement('div');
            cartContentName.className = 'cart_content__name';
            cartContentName.innerText = item.name;
            cartContentOne.appendChild(cartContentName);

            const cartContentPrice = document.createElement('div');
            cartContentPrice.className = 'cart_content__price';
            cartContentPrice.innerText = item.price;
            cartContentOne.appendChild(cartContentPrice);

            const cartContentQuantity = document.createElement('div');
            cartContentQuantity.className = 'cart_content__quantity';
            const quantityMinus = document.createElement('div');
            quantityMinus.className = 'quantity_minus';
            const quantityMinusButton = document.createElement('button');
            quantityMinusButton.innerHTML = '<i class="fa fa-minus" aria-hidden="true"></i>';
            quantityMinus.appendChild(quantityMinusButton);
            const quantityCount = document.createElement('div');
            quantityCount.className = 'quantity_count';
            const quantityCountSpan = document.createElement('span');
            quantityCountSpan.innerText = item.quantity;
            quantityCount.appendChild(quantityCountSpan);
            const quantityPlus = document.createElement('div');
            quantityPlus.className = 'quantity_plus';
            const quantityPlusButton = document.createElement('button');
            quantityPlusButton.innerHTML = '<i class="fa fa-plus" aria-hidden="true"></i>';
            quantityPlus.appendChild(quantityPlusButton);
            cartContentQuantity.appendChild(quantityMinus);
            cartContentQuantity.appendChild(quantityCount);
            cartContentQuantity.appendChild(quantityPlus);
            cartContentOne.appendChild(cartContentQuantity);

            const cartContentDelete = document.createElement('div');
            cartContentDelete.className = 'cart_content__delete';
            const cartContentDeleteButton = document.createElement('button');
            cartContentDeleteButton.dataset.artfordel = item.articul;
            cartContentDeleteButton.innerHTML = `<i class="fa fa-trash" aria-hidden="true" data-art="${item.articul}"></i>`;
            cartContentDelete.appendChild(cartContentDeleteButton);
            cartContentOne.appendChild(cartContentDelete);

            cardContent.appendChild(cartContentOne);
        });

думал может потому что напрямую через innerHTML вставлял разметку html, думал может из-за этого не работает. Но все равно не помогает. Не знаю что делать

[Максим Д.]

Руслан, давайте делать обработчик событий так:
document.body.addEventListener( 'click', function ( event ) {
if( event.target.id == 'btnSubmit' ) {
someFunc();
};
} );

Подробнее:
https://stackoverflow.com/questions/34896106/attac...

[Руслан]

maximq, Спасибо! Переделал код по вашему совету:

document.body.addEventListener( 'click', function ( event ) {
    const target = event.target.closest(".quantity_plus");
    if(target) {
        const artInput = event.target.closest('.cart_content__one').querySelector('input[type="hidden"]');
        let countSpan = event.target.closest('.cart_content__one').querySelector('.quantity_count span');
        let priceDiv = event.target.closest('.cart_content__one').querySelector('.cart_content__price');
        const articul = artInput.value;
        plusFunction(articul, countSpan, priceDiv);
    };
} );

Все работает как надо теперь)
Спасибо вам большое, что не забросили и помогли разобраться!