JS Не получается сделать добавление в корзину суммы товаров при нажатии на кнопку "добавить" и вывод "в корзине Н товаров стоимостью М рублей"
https://codepen.io/sophie-lamperg/pen/zYqqMgP
//
document.addEventListener('DOMContentLoaded', () => {
let main = document.querySelector('.main');
let hd = document.createElement('h1');
hd.className = 'header';
hd.innerHTML = 'This is your basket';
hd.style.textAlign = 'center';
main.appendChild(hd);
let basketWrap = document.createElement('div');
basketWrap.className = 'basket__wrap';
main.appendChild(basketWrap);
let newProd;
class Basket {
constructor(prod, price) {
this.prod = prod;
this.price = price;
}
getSum() {
return this.price * this.number;
}
}
function createProdItem(item) {
newProd = document.createElement('div');
newProd.className = 'prod__wrap';
newProd.innerHTML = `
<div class="prod__header">${item.prod}</div>
<div class="count">
<div class="prod__price">${item.price}</div>
<button class="minus">-</button>
<div class="number">0</div>
<button class="plus">+</button>
</div>`;
basketWrap.appendChild(newProd);
}
let addBasket = document.createElement('button');
addBasket.className = 'add__btn';
addBasket.innerHTML = 'Добавить';
main.appendChild(addBasket);
// ------------------------------------------
let basketInfo = document.createElement('div');
basketInfo.className = 'basket__info';
basketInfo.innerHTML =
`<div class="sum__wrap">Корзина пуста</div>
<div class="sum__price"></div>`;
main.appendChild(basketInfo);
let newFood1 = new Basket("pizza", 1500);
let newFood2 = new Basket("sandwich", 120);
let newFood3 = new Basket("ice", 100);
createProdItem(newFood1);
createProdItem(newFood2);
createProdItem(newFood3);
// -------------------------------------------------------
let del = document.createElement('button');
del.className = 'delete';
del.innerHTML = 'Очистить';
main.appendChild(del);
// -----------------------------------------------
var sum = document.querySelector('.sum__price');
// -----------------------------------------------------
var infoWrap = document.querySelector('.sum__wrap');
// ----------------------plus and minus--------------------
function addHandlers(count) {
var minus = count.querySelector(".minus");
var number = count.querySelector(".number");
var plus = count.querySelector(".plus");
let price = count.querySelector('.prod__price');
// var number1 = document.querySelectorAll(".number");
// let price1 = document.querySelectorAll('.prod__price');
let massSum = [];
plus.addEventListener("click", function () {
number.innerText++;
sum = number.innerText * price.innerText;
massSum.push(sum);
});
minus.addEventListener("click", function () {
if (number.textContent == 0) {
number.textContent = 0;
}
else {
number.innerText--;
// sum = sum - number.innerText * price.innerText;
}
});
}
var counts = document.querySelectorAll(".count");
counts.forEach(addHandlers);
// var bw = document.querySelector('.basket__wrap');
// -------------------clear--------------------------------
let dele = document.querySelector('.delete');
dele.addEventListener("click", function () {
var number = document.querySelectorAll(".number");
sum.textContent = 0;
infoWrap.textContent = 'Корзина пуста';
for (let i = 0; i < number.length; i++) {
number[i].innerText = 0;
}
})
let price = document.querySelectorAll('.prod__price');
var number = document.querySelectorAll(".number");
addBasket.addEventListener("click", function () {
infoWrap.innerText = `В корзине товаров на сумму рублей`;
})