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

HTML JavaScript

10 апреля 2026 1 ответ

Здравствуйте!
Реализую добавление товаров в корзину и отображение списка товаров в корзине в виде модального popup окошка.
Товары добавляются по кнопке в карточке товара:

// добавление товара в корзину по кнопке const oneProductCardButton = document.querySelectorAll('.products_one_price_card button');  oneProductCardButton.forEach((oneProductCardButtonItem) =&gt; {     oneProductCardButtonItem.addEventListener('click', (event) =&gt; {         product = getProductInfo(oneProductCardButtonItem);         addProductToCart(product);         updateCartCoint();         renderCartOnPage();     }); });

// добавление товара в корзину по кнопке 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 &gt; 0) {         cardContent.innerHTML = cart.map((item) =&gt; `         &lt;div class="cart_content__one"&gt;             &lt;input type="hidden" value="${item.articul}"&gt;             &lt;div class="cart_content__img"&gt;                 &lt;img src="/img/products_pictures/${item.img}"&gt;             &lt;/div&gt;             &lt;div class="cart_content__name"&gt;${item.name}&lt;/div&gt;             &lt;div class="cart_content__price"&gt;${item.price}&lt;/div&gt;             &lt;div class="cart_content__quantity"&gt;                 &lt;div class="quantity_minus"&gt;&lt;button&gt;&lt;i class="fa fa-minus" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;                 &lt;div class="quantity_count"&gt;&lt;span&gt;${item.quantity}&lt;/span&gt;&lt;/div&gt;                 &lt;div class="quantity_plus"&gt;&lt;button&gt;&lt;i class="fa fa-plus" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;             &lt;/div&gt;             &lt;div class="cart_content__delete"&gt;&lt;i class="fa fa-trash" aria-hidden="true" data-art="${item.articul}"&gt;&lt;/i&gt;&lt;/div&gt;         &lt;/div&gt;         `);      } 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) =&gt; {     plusItem.addEventListener('click', (event) =&gt; {         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 =&gt; 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); }

// добавление еденицы товара при клике по кнопке плюс 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); }

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

Дополнительно:

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

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

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

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

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

добавил
plusItem.addEventListener('click', (event) => { console.log("test")
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 &gt; 0) {         cardContent.innerHTML = cart.map((item) =&gt; `         &lt;div class="cart_content__one"&gt;             &lt;input type="hidden" value="${item.articul}"&gt;             &lt;div class="cart_content__img"&gt;                 &lt;img src="/img/products_pictures/${item.img}"&gt;             &lt;/div&gt;             &lt;div class="cart_content__name"&gt;${item.name}&lt;/div&gt;             &lt;div class="cart_content__price"&gt;${item.price}&lt;/div&gt;             &lt;div class="cart_content__quantity"&gt;                 &lt;div class="quantity_minus"&gt;&lt;button&gt;&lt;i class="fa fa-minus" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;                 &lt;div class="quantity_count"&gt;&lt;span&gt;${item.quantity}&lt;/span&gt;&lt;/div&gt;                 &lt;div class="quantity_plus"&gt;&lt;button&gt;&lt;i class="fa fa-plus" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;             &lt;/div&gt;             &lt;div class="cart_content__delete"&gt;&lt;i class="fa fa-trash" aria-hidden="true" data-art="${item.articul}"&gt;&lt;/i&gt;&lt;/div&gt;         &lt;/div&gt;         `);         const plusButton = document.querySelectorAll(".quantity_plus button");         plusButton.forEach((plusItem) =&gt; {         plusItem.addEventListener('click', (event) =&gt; {            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 =&gt; {             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 = '&lt;i class="fa fa-minus" aria-hidden="true"&gt;&lt;/i&gt;';             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 = '&lt;i class="fa fa-plus" aria-hidden="true"&gt;&lt;/i&gt;';             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 = `&lt;i class="fa fa-trash" aria-hidden="true" data-art="${item.articul}"&gt;&lt;/i&gt;`;             cartContentDelete.appendChild(cartContentDeleteButton);             cartContentOne.appendChild(cartContentDelete);              cardContent.appendChild(cartContentOne);         });

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);     }; } );

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); }; } );

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

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Анна SEO Ответ

26 апреля 2026 в 17:40

Проблема, когда JavaScript не срабатывает сразу после отрисовки HTML кода, может возникать по разным причинам. Вот несколько возможных причин и способы их решения:

1. JavaScript код размещен в разделе страницы: Если ваш JavaScript код находится в разделе страницы, то он будет выполняться до того, как весь HTML код будет загружен и отрисован. В этом случае рекомендуется переместить ваш JavaScript код вниз страницы перед закрывающим тегом . Это позволит JavaScript выполняться после отрисовки HTML кода.

 
 
 
  <title>Пример</title>
 
 
  <h1>Привет, мир!</h1>
 
 
    // Ваш JavaScript код здесь

<title>Пример</title> <h1>Привет, мир!</h1> // Ваш JavaScript код здесь

2. JavaScript код содержит ошибки: Если в вашем JavaScript коде содержатся ошибки, то он может не выполняться после отрисовки HTML кода. Убедитесь, что ваш JavaScript код написан правильно и не содержит синтаксических ошибок.

3. Скрипт загружается асинхронно или отложено: Если вы используете атрибуты async или defer при подключении внешних JavaScript файлов, то скрипт может загружаться и выполняться асинхронно после отрисовки HTML кода. В этом случае убедитесь, что вы правильно используете эти атрибуты или удалите их, чтобы JavaScript выполнялся сразу.

4. Событие DOMContentLoaded не обрабатывается: Если вы используете событие DOMContentLoaded для выполнения JavaScript кода после загрузки DOM дерева, убедитесь, что обработчик события добавлен правильно. Например:

document.addEventListener('DOMContentLoaded', function() {
  // Ваш JavaScript код здесь
});

document.addEventListener('DOMContentLoaded', function() { // Ваш JavaScript код здесь });

5. Кеширование браузера: Иногда браузер может кешировать JavaScript файлы, что может привести к тому, что изменения в коде не будут отображаться сразу после отрисовки HTML. В этом случае очистите кеш браузера или используйте инкогнито-режим для проверки.

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ

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

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно