Событие click срабатывает много раз
Когда в корзине один товар, минусирование и плюсование количества работает правильно, а когда два разных товара или больше, то количество самого первого товара изменяется на количество продуктов в корзине, количество второго изменяется на количество продуктов в корзине минус один, количество третьего на количество продуктов в корзине корзины минус два и тд... То есть событие клик срабатывает пару раз В чем может быть проблема?
Функция корзины:
let minusQuantity = document.querySelectorAll(".minus-quantity"),
orderDetailSum = document.querySelector(".order-total-price"),
numberOfProductsDOM = document.querySelector(".calc-added-products"),
caclnumberOfProducts = 0,
addedProductsList = document.querySelector(".added-products-list "),
orders = {}
const cartWaitTimeout = setTimeout(function () { cart () }, 1000)
function cart () {
if (document.querySelectorAll(".cta-card")) {
clearInterval(cartWaitTimeout)
let buyBtns = document.querySelectorAll(".cta-card")
buyBtns.forEach(function (e) {
e.addEventListener("click", function () {
console.log("btn clicked");
console.log(e);
buyBtnFunc(e)
})
})
function buyBtnFunc(e) {
let productID = e.dataset.value
fetch('products.json')
.then(response => response.json())
.then(products => {
caclnumberOfProducts++
const product = products.find(product => product.id === productID)
numberOfProductsDOM.innerText = caclnumberOfProducts
if (orders[product.id]) {
orders[product.id].quantity++
orders.orderSum += Number((orders[product.id].product.price).slice(0, -4))
const totalPriceSpan = addedProductsList.querySelector('[data-value="' + product.id + '"]' + " .total-price span"),
totalQuantitySpan = addedProductsList.querySelector('[data-value="' + product.id + '"]' + " .quantity-number")
orders[product.id].totalPrice = Number((orders[product.id].product.price).slice(0, -4)) * orders[product.id].quantity
totalPriceSpan.innerText = orders[product.id].totalPrice + "валюта"
totalQuantitySpan.innerText = orders[product.id].quantity
} else {
orders[product.id] = {
product: product,
quantity: 1,
}
orders.orderSum += Number((orders[product.id].product.price).slice(0, -4))
const card = document.createElement("div")
card.innerHTML = `
<div class="basket-card flex items-center" data-value=${product.id}>
<div class="basket-product-description flex items-center">
<img src=${product.img}>
<div class="description">
<h3>${product.head}</h3>
<table>
<tr>
<td>цвет</td>
<td></td>
</tr>
<tr>
<td>размер</td>
<td></td>
</tr>
<tr>
<td>цена</td>
<td>${product.price} <span>${product.saleprice}</span></td>
</tr>
<tr>
<td>количество</td>
<td><div class="quantity flex">
<div class="minus-quantity" data-value="${product.id}">-</div>
<div class="quantity-number">${orders[product.id].quantity}</div>
<div class="plus-quantity" data-value="${product.id}">+</div>
</div></td>
</tr>
</table>
<div class="delete-product">удалить</div>
</div>
</div>
<div class="total-price">
<span>${Number((orders[product.id].product.price).slice(0, -4))*orders[product.id].quantity + "валюта"}</span>
</div>
</div>
`
addedProductsList.appendChild(card)
}
minusQuantity = document.querySelectorAll(".minus-quantity")
let plusQuantity = document.querySelectorAll(".plus-quantity")
plusQuantity.forEach(function (e) {
e.addEventListener("click", function (i) {
let productID = this.dataset.value
const product = products.find(product => product.id === productID)
if (orders[product.id]) {
orders[product.id].quantity = orders[product.id].quantity + 1
const totalPriceSpan = addedProductsList.querySelector('[data-value="' + product.id + '"]' + " .total-price span"),
totalQuantitySpan = addedProductsList.querySelector('[data-value="' + product.id + '"]' + " .quantity-number")
orders[product.id].totalPrice = Number((orders[product.id].product.price).slice(0, -4)) * orders[product.id].quantity
totalPriceSpan.innerText = orders[product.id].totalPrice + "валюта"
totalQuantitySpan.innerText = orders[product.id].quantity
orders.orderSum += Number((orders[product.id].product.price).slice(0, -4))
}
orderDetailSum.innerText = orders.orderSum
})
})
minusQuantity.forEach(function (e) {
e.addEventListener("click", function (i) {
let productID = this.dataset.value
const product = products.find(product => product.id === productID)
if (orders[product.id] && orders[product.id].quantity != 1) {
orders[product.id].quantity = orders[product.id].quantity - 1
const totalPriceSpan = addedProductsList.querySelector('[data-value="' + product.id + '"]' + " .total-price span"),
totalQuantitySpan = addedProductsList.querySelector('[data-value="' + product.id + '"]' + " .quantity-number")
orders[product.id].totalPrice = Number((orders[product.id].product.price).slice(0, -4)) * orders[product.id].quantity
totalPriceSpan.innerText = orders[product.id].totalPrice + "валюта"
totalQuantitySpan.innerText = orders[product.id].quantity
orders.orderSum -= Number((orders[product.id].product.price).slice(0, -4))
}
orderDetailSum.innerText = orders.orderSum
})
})
orderDetailSum.innerText = orders.orderSum
})
}
}
}```