So I got my cart page functioning pretty well and I want to know how to make my Clear Cart button remove every item from the cart if possible.
Here’s my code:
``<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://kit.fontawesome.com/ec308a8989.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<title>Cart</title>
<link rel = "stylesheet" href="assets/css/styleCart.css">
</head>
<body>
<img style="float: left;" src="assets/img/mine.png" width="200" height="80" onclick="Home()">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="navborder" href="Tacos.html">Tacos</a>
</li>
<li class="nav-item">
<a class="navborder" href="Burritos.html">Burritos</a>
</li>
<li class="nav-item">
<a class="navborder" href="drinks.html">Drinks</a>
</li>
<li class="nav-item">
<a class="navborder" href="desert.html">Deserts</a>
</li>
<li>
<a class="navborder" href="SpecialMenu.html">Special Menu</a>
</li>
<li>
<a class="navborder" href="Cart.html">Checkout</a>
</li>
</ul>
</div>
</div>
</nav>
<br>
<p1>NOW AVAILABLE ON UBER-EATS! </p1>
<h1>CART</h1>
<form>
<div class="card">
<a name="cartSection"></a>
<div class="cart-row">
<div class="cart-item-name cart-header cart-column">Item</div>
<div class="cart-price-header cart-header cart-column">Price</div>
<div class="cart-quantity cart-header cart-column">Quantity</div>
<div class="cart-quantity cart-header cart-column">Sub-total</div>
</div>
<div class="cart-items">
<ul id="show-cart">
<span-cart>Your cart is empty!</span-cart>
</ul>
</div>
<div class="cart-total">Total Cart:$<span id="total-cart"></span></div><br><br>
<button id="clear-cart">Clear Cart</button><br><br><br>
<button type="button" value="Check Out" id="checkOut" onclick="purchase()">Check Out</button>
</div>
</form>
<script src="js/ItemScripts.js"></script>
<script src="js/drinks.js"></script>
<script src="js/scriptsCart.js"></script>
<script src="js/scriptsBurrito.js"></script>
<script src="js/desert.js"></script>
<script src="js/scriptsMisc.js"></script>
</body>
</html>`
`var cart = [];
function Item(name, price, count) {
this.name = name
this.price = price
this.count = count
};
var addToCartButtons = document.getElementsByClassName('add-to-cart');
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i];
button.addEventListener('click', addToCartClicked);
}
function addToCartClicked(name,price) {
if(cart === null) {
cart = [];
}
var parent1 = document.querySelectorAll('#itemName');
var name = parent1[0].textContent;
console.log("1st child of parent1");
console.log(name)
var parent2 = document.querySelectorAll('#itemPrice');
var price = Number(parent2[0].textContent);
console.log("1st child of parent2");
console.log(price);
const Item={
name: name,
price: price,
count: 1,
};
console.log(Item);
addItemToCart(name, price, 1);
displayCart();
}
function addItemToCart(name, price, count) {
for (var i in cart) {
if (cart[i].name === name && cart[i].price === price) {
cart[i].count += count;
saveCart();
return;
}
}
var item = new Item(name, price, count);
cart.push(item);
saveCart();
}
console.log("add to cart");
console.log(cart);
function listCart() {
var cartCopy = [];
for (var i in cart) {
var item = cart[i];
var itemCopy = {};
for (var p in item) {
itemCopy[p] = item[p];
}
itemCopy.total = (item.price * item.count).toFixed(2);
cartCopy.push(itemCopy);
}
return cartCopy;
};
function displayCart() {
var cartArray = listCart();
var output = "";
for (var i in cartArray) {
output += "<div class='itemDetail'>"
+"<div class='cart-item cart-column'>"
+cartArray[i].name
+ "</div>"
+"<div class='cart-price cart-column'>"
+" $ "+cartArray[i].price
+"</div>"
+" <input class='item-count cart-column' type='number' data-name='"
+cartArray[i].name
+"' value='"+cartArray[i].count+"'>"
+"<div class='subTotal cart-column'>"
+" $ "+cartArray[i].total
+"</div>"
+"</div>";
}
$("#show-cart").html(output);
$("#count-cart").html(countCart());
$("#total-cart").html(totalCart());
}
function setCountForItem(name, price, count) {
for (var i in cart) {
if (cart[i].name === name) {
cart[i].count = count;
if (cart[i].count == 0 ) {
cart.splice(i, 1);
}
break;
}
}
saveCart();
};
function removeItemFromCart(name, price, count) {
for (var i in cart) {
if (cart[i].name === name ) {
cart[i].count --;
if (cart[i].count == 0 ) {
cart.splice(i, 1);
}
break;
}
}
saveCart();
};
function countCart() {
var totalCount = 0;
for (var i in cart) {
totalCount += cart[i].count;
}
return totalCount;
};
function totalCart() {
var totalCost = 0;
for (var i in cart) {
totalCost += cart[i].price * cart[i].count;
}
return totalCost.toFixed(2);
};
function saveCart(){
localStorage.setItem("shoppingCart", JSON.stringify(cart));
};
function loadCart() {
cart = JSON.parse(localStorage.getItem("shoppingCart"));
};
loadCart();
displayCart();
$("#show-cart").on("change", ".item-count", function(event){
var name = $(this).attr("data-name");
var price = $(this).attr("data-price");
var count = Number( $(this).val() );
setCountForItem(name, price, count);
displayCart();
});
/*ITEM 2 */
var addToCartButtons = document.getElementsByClassName('add-to-cart2');
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i];
button.addEventListener('click', addToCartClicked2);
}
function addToCartClicked2() {
var parent1 = document.querySelectorAll('#itemName2');
var name = parent1[0].textContent;
console.log("1st child of parent1");
console.log(name)
var parent2 = document.querySelectorAll('#itemPrice2');
var price = Number(parent2[0].textContent);
console.log("1st child of parent2");
console.log(price);
addItemToCart(name, price, 1);
displayCart();
}
/*ITEM 3 */
var addToCartButtons = document.getElementsByClassName('add-to-cart3');
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i];
button.addEventListener('click', addToCartClicked3);
}
function addToCartClicked3() {
var parent1 = document.querySelectorAll('#itemName3');
var name = parent1[0].textContent;
console.log("1st child of parent1");
console.log(name)
var parent2 = document.querySelectorAll('#itemPrice3');
var price = Number(parent2[0].textContent);
console.log("1st child of parent2");
console.log(price);
addItemToCart(name, price, 1);
displayCart();
}
/*ITEM 4 */
var addToCartButtons = document.getElementsByClassName('add-to-cart4');
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i];
button.addEventListener('click', addToCartClicked4);
}
function addToCartClicked4() {
var parent1 = document.querySelectorAll('#itemName4');
var name = parent1[0].textContent;
console.log("1st child of parent1");
console.log(name)
var parent2 = document.querySelectorAll('#itemPrice4');
var price = Number(parent2[0].textContent);
console.log("1st child of parent2");
console.log(price);
addItemToCart(name, price, 1);
displayCart();
}`
I tried to copy the remove item code with a clearCartClicked function that I removed from the code but it didn’t work.
Also sorry if the question is worded poorly this is my first question on the site.