when i select the item in cart, it is selected. But when i try to increase the quantity, the price does not change and i have to recheck to update the price. Please help as i cannot figure out how to increase the price when i increase or decrease the quantity of item. I also cannot put increase/decrease function in selectBtn as it would become a loop of number
let quantities = document.querySelectorAll(".quantity-number");
let plusAll = document.querySelectorAll(".plus");
let minusAll = document.querySelectorAll(".minus");
quantities.forEach((quantity, index) => {
let plus = plusAll[index];
let minus = minusAll[index];
plus.addEventListener("click", () => {
quantity.innerHTML++;
if (quantity.innerHTML > 1) {
minus.disabled = false;
}
})
minus.addEventListener("click", () => {
if (quantity.innerHTML <= 1) {
minus.disabled = true;
} else {
minus.disabled = false;
quantity.innerHTML--;
}
})
});
let items = document.querySelectorAll(".item");
document.querySelector("title").innerHTML =
items.length + " items found in Cart";
let prices = document.querySelectorAll(".price");
let selectBtn = document.querySelectorAll(".select");
let selectAll = document.querySelector(".selectAll");
let totalItem = document.querySelectorAll(".totalItem");
let totalPrice = document.querySelector(".totalPrice");
let finalPrice = document.querySelector(".finalPrice");
selectBtn.forEach((btn, index) => {
let price = Number(prices[index].innerHTML);
selectAll.addEventListener("input", () => {
if (selectAll.checked == true) {
if (btn.checked == false) {
btn.checked = true;
let quantity = Number(quantities[index].innerHTML);
if (quantity == 1) {
price = price;
} else {
price = Number(prices[index].innerHTML);
price = price * quantity;
};
totalItem.forEach((total) => {
total.innerHTML++;
})
if (totalPrice.innerHTML == 0) {
totalPrice.innerHTML = (price).toFixed(2);
finalPrice.innerHTML = (4 + Number(totalPrice.innerHTML)).toFixed(2);
} else {
totalPrice.innerHTML = (Number(totalPrice.innerHTML) + price).toFixed(2);
finalPrice.innerHTML = (4 + Number(totalPrice.innerHTML)).toFixed(2);
}
}
} else {
btn.checked = false;
totalItem.forEach((total) => {
total.innerHTML--;
})
totalPrice.innerHTML = (Number(totalPrice.innerHTML) - price).toFixed(2);
if (totalPrice.innerHTML == 0) {
finalPrice.innerHTML = 0;
} else {
finalPrice.innerHTML = (Number(totalPrice.innerHTML) + 4).toFixed(2);
}
}
})
btn.addEventListener("input", () => {
if (btn.checked) {
let quantity = Number(quantities[index].innerHTML);
if (quantity == 1) {
price = price;
} else {
price = Number(prices[index].innerHTML);
price = price * quantity;
};
totalItem.forEach((total) => {
total.innerHTML++;
})
if (totalPrice.innerHTML == 0) {
totalPrice.innerHTML = (price).toFixed(2);
finalPrice.innerHTML = (4 + Number(totalPrice.innerHTML)).toFixed(2);
} else {
totalPrice.innerHTML = (Number(totalPrice.innerHTML) + price).toFixed(2);
finalPrice.innerHTML = (4 + Number(totalPrice.innerHTML)).toFixed(2);
}
} else {
totalItem.forEach((total) => {
total.innerHTML--;
})
selectAll.checked = false;
totalPrice.innerHTML = (Number(totalPrice.innerHTML) - price).toFixed(2);
if (totalPrice.innerHTML == 0) {
finalPrice.innerHTML = 0;
} else {
finalPrice.innerHTML = (Number(totalPrice.innerHTML) + 4).toFixed(2);
}
}
})
})<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[#f5f4f4] hide-scrollbar">
<div class="">
<h2 class="text-3xl text-center py-8">Your Cart</h2>
<div class="md:grid md:grid-cols-3">
<div class="grid space-y-4 col-span-2">
<div class="flex justify-between bg-white mx-4 px-4 py-2 border-black border ">
<div class="flex space-x-4 items-center">
<input type="checkbox" class="selectAll">
<p>SELECT ALL</p>
</div>
<button>
<img class="w-8 h-8" src="../images/main/delete.png" alt="">
</button>
</div>
<div class="item flex items-center px-4 py-2 bg-white mx-4 space-x-2 border-black border">
<input class="select rounded-full" type="checkbox" name="" id="">
<img class="w-20 h-20" src="../images/Cowin-Blue-Wholesale-Aviation-Active-Noise-Cancelling-Headphones-Wired-Gaming-Earphones-Headsets-Bluetooth-Headphones-Wireless/prod1.webp" alt="">
<div class="grid grod-rows-2 w-full">
<p class="text-justify text-sm line-clamp-2">Cowin Blue Wholesale: Aviation Active Noise Cancelling Headphones, Wired Gaming Earphones, Headsets, Bluetooth Headphones, Wireless</p>
<div class="flex justify-between">
<div class="grid grid-rows-2">
<p class="text-base font-bold">$<span class="text-xl price">59.99</span></p>
<p class="text-xs">$<del class="text-sm">79.99</del></p>
</div>
<div class="quantity flex items-center space-x-2 py-2 text-white">
<button class="minus bg-slate-600 w-8 h-8 hover:bg-slate-700 active:bg-slate-800 text-xl flex justify-center">−</button>
<p class="quantity-number text-black">1</p>
<button class="plus bg-slate-600 w-8 h-8 hover:bg-slate-700 active:bg-slate-800 text-xl flex justify-center">+</button>
</div>
</div>
</div>
</div>
<div class="item flex items-center px-4 py-2 bg-white mx-4 space-x-2 border-black border">
<input class="select rounded-full" type="checkbox" name="" id="">
<img class="w-20 h-20" src="../images/Modern-soft-and-comfortable-office-E-sports-club-chair-designed-for-ergonomic-gaming-on-computers/prod1.webp" alt="">
<div class="grid grod-rows-2 w-full">
<p class="text-justify text-sm line-clamp-2">Modern, soft, and comfortable office E-sports club chair designed for ergonomic gaming on computers</p>
<div class="flex justify-between">
<div class="grid grid-rows-2">
<p class="text-base font-bold">$<span class="text-xl price">99.99</span></p>
<p class="text-xs">$<del class="text-sm">119.99</del></p>
</div>
<div class="quantity flex items-center space-x-2 py-2 text-white">
<button class="minus bg-slate-600 w-8 h-8 hover:bg-slate-700 active:bg-slate-800 text-xl flex justify-center">−</button>
<p class="quantity-number text-black">1</p>
<button class="plus bg-slate-600 w-8 h-8 hover:bg-slate-700 active:bg-slate-800 text-xl flex justify-center">+</button>
</div>
</div>
</div>
</div>
<div class="item flex items-center px-4 py-2 bg-white mx-4 space-x-2 border-black border">
<input class="select rounded-full" type="checkbox" name="" id="">
<img class="w-20 h-20" src="../images/New-and-stylish-Auricularess-Bluetooth-earbuds-custom-waterproof-design-perfect-for-immersive-gaming-experiences/prod1.webp" alt="">
<div class="grid grod-rows-2 w-full">
<p class="text-justify text-sm line-clamp-2">New and stylish Auricularess Bluetooth earbuds, custom waterproof design, perfect for immersive gaming experiences.</p>
<div class="flex justify-between">
<div class="grid grid-rows-2">
<p class="text-base font-bold">$<span class="text-xl price">24.99</span></p>
<p class="text-xs">$<del class="text-sm">29.99</del></p>
</div>
<div class="quantity flex items-center space-x-2 py-2 text-white">
<button class="minus bg-slate-600 w-8 h-8 hover:bg-slate-700 active:bg-slate-800 text-xl flex justify-center">−</button>
<p class="quantity-number text-black">1</p>
<button class="plus bg-slate-600 w-8 h-8 hover:bg-slate-700 active:bg-slate-800 text-xl flex justify-center">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="checkout bg-white p-4 m-4 md:m-0 md:mr-4 h-fit">
<p class="font-semibold">Order Summary</p>
<ul class="py-2 space-y-4">
<li class="flex justify-between">
<p>Subtotal (<span class="totalItem">0</span> items)</p>
<p>$<span class="totalPrice">0</span></p>
</li>
<li class="shipping flex justify-between">
<p>Shipping Fee</p>
<p>$4</p>
</li>
<li class="flex justify-between">
<p>Total</p>
<p class="text-blue-600">$<span class="finalPrice">0</span></p>
</li>
</ul>
<button class="bg-orange-500 text-white py-2 w-full mt-5 hover:bg-orange-600 active:bg-orange-500">Proceed To Checkout (<span class="totalItem">0</span>)</button>
</div>
</div>
</div>
<script src="side.js"></script>
</div>