I have a website and there is a shopping cart. I can put stuff in there. There is also an item counter in this basket, but there was one problem. Now I need to find the cost of items added to the cart through the console. But when you try to do this, the console returns NaN.
const cartWrapper = document.querySelector('#check');
window.addEventListener('click', function(event) {
if (event.target.hasAttribute('data-cart')) {
const card = event.target.closest('.dlg-modal')
//Собираем данные
const productInfo = {
id: card.dataset.id,
imgSrc: card.querySelector('.gui__pizzablock').getAttribute('src'),
title: card.querySelector('.productTitle').innerText,
price: card.querySelector('.priceTitle').innerText,
description: card.querySelector('.gui__description').innerText,
counter: card.querySelector('[data-counter]').innerText,
};
const itemInCart = cartWrapper.querySelector(`[data-id="${productInfo.id}"]`);
if (itemInCart) {
alert('present')
const counterElement = itemInCart.querySelector('[data-counter]')
counterElement.innerHTML = parseInt(counterElement.innerHTML) + 1;
alert('wow')
} else {
const cartItemHTML = `<div class="item__block">
<div data-id="${productInfo.id}">
<img class="img__rubb" src="${productInfo.imgSrc}">
<p style="margin: -73px 100px">${productInfo.title}</p>
<p class="description__rubb" style="margin: 81px 100px">${productInfo.description}</p>
<hr class="hr__rubb">
<p style="margin: 70px 15px"><span class="amount__price">${productInfo.price}</span>руб.</p>
<!-- <div class="items__control" data-action="minus">-</div>-->
<div class="counter__rubb">
<div class="counter__rubb_text">
<a class="minus__plus__rubb" style=" -moz-user-select: none; display: inline-flex; font-size: 21px" data-action="minus">-</a>
<div style="display: inline-flex; cursor: default; -moz-user-select: none; " data-counter>${productInfo.counter}</div>
<a class="minus__plus__rubb" style=" -moz-user-select: none; display: inline-flex; font-size: 21px;" data-action="plus">+</a>
</div>
</div>
<div class="buy__rubb">
<div class="buy__rbb__boxes">
<p style="margin: 1% 3%; display: inline-flex">1 товар</p>
<p style="margin: 1% 30.5%; display: inline-flex">0 руб.</p>
<hr class="hr__rubba">
<p style="margin: 1% 3%; font-size: 16px; display: inline-flex">Сумма заказа</p>
<p style="margin: 1% 22.5%; display: inline-flex">0 руб.</p>
<div class="btn__rubb__podval">
<a href="#" class="btn__rubb">К оформлению заказа</a>
</div>
</div>
</div>
</div>
</div>`;
cartWrapper.insertAdjacentHTML('beforeend', cartItemHTML)
}
offCartStatus();
}
})
function calcPrice() {
const cartItems = document.querySelectorAll('.item__block')
let totalPrice;
cartItems.forEach(function(item) {
const amount = item.querySelector('[data-counter]');
const price = item.querySelector('.amount__price');
const currentPrice = parseInt(amount.innerHTML) * parseFloat(price.innerHTML);
totalPrice = totalPrice + currentPrice
})
console.log(totalPrice)
}
<div data-id="999" id="check" class="dlg-modal dlg-modal-fade" style="background: #f3f3f3; width: 790px; height: 100%; left: 100%">
<div class="item__block__container">
<div data-cart-empty class="emptyContainer">
<div class="emptyBlock">
<img class="emptyBlock" src="notfinedCart.svg" style="">
<h2 class="emptyBlock">Empty!</h2>
<p class="emptyBlock"><br>Oh!!!<br>Cart empty:(<br>Select something</p>
</div>
</div>
Note: I open cart with popup
If you do not put everything in a variable, then there are no errors.