I'm having problem on the total price of this code because when I implement this onto my whole html code the total price remains at the same $0 when I change the quantity of my shopping cart to another value for exp. 5. Can anyone help me on this?
function updateCartTotal() {
let cartItemContainer = document.querySelector('.click-cart');
let cartRows = cartItemContainer.querySelectorAll('.cart-row');
let total = 0
for (let i = 0; i < cartRows.length; i ) {
let cartRow = cartRows[i]
let priceElement = cartRow.querySelector('.shop-price');
let quantityElement = cartRow.querySelector('.quantity-input');
let price = parseFloat(priceElement.innerText.replace('RM', ''))
let quantity = quantityElement.value
total = (price * quantity)
}
total = Math.round(total * 100) / 100
document.querySelector('.cart-total-price').innerText = 'RM' total;
}CodePudding user response：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<div>
<span>QTY</span>
<span>PRICE</span>
</div>
<div >
<span >2</span>
<span style="margin-left: 30px;">1</span>
</div>
<div >
<span >2</span>
<span style="margin-left: 30px;">2</span>
</div>
<div >
<span >2</span>
<span style="margin-left: 30px;">3</span>
</div>
<div >
<span >2</span>
<span style="margin-left: 30px;">5</span>
</div>
<div >
<span >2</span>
<span style="margin-left: 30px;">3</span>
</div>
<div >
<span >1</span>
<span style="margin-left: 30px;">1</span>
</div>
<h6 id="total">0</h6>
</body>
<script>
onl oad = getTotal()
function getTotal() {
price = document.getElementsByClassName("price");
quantities = document.getElementsByClassName("qty");
let total = 0
for (let i = 0; i < price.length; i ) {
total = total parseInt(quantities[i].textContent) * parseInt(price[i].textContent);
}
document.getElementById("total").innerHTML = "Total " total
}
</script>
</html>CodePudding user response：
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<style type="text/css">
*{
box-sizing:border-box;
}
/*Header/logo title*/
.header{
font-size: 23px;
padding:100px;
text-align: center;
background-image:url('sea.jpg');
text-shadow: 2px 2px 2px black, 0 0 15px rgb(1, 59, 0);
color: white;
}
/*Style the top navigation bar*/
div.gallery{
margin:29px;
border:1px solid rgb(0, 255, 221);
float:left;
width:275px;
text-align: center;
box-shadow: 0 4px 8px 0 rgb(0, 52, 89), 0 6px 20px 0 rgb(167, 167, 213);
margin-bottom: 180px;
}
div.gallery img{
width:100%;
height:165px;
}
div.desc{
padding:20px;
text-align:center;
}
div.gallery:hover{
border:1px solid purple;
}
/*-----*/
/*Column container*/
.row{
display:flex;
flex-wrap:wrap;
}
/*Create two unequal columns that sits next to each other*/
/*Sidebar/left column*/
.side{
flex:50%;
background-color: rgb(255, 255, 255);
color:rgb(227, 157, 157);
padding:20px;
text-align: justify;
}
/*main column*/
.main{
flex:50%;
background-color: white;
padding:20px;
text-align: justify;
}
.logo{
background-image:url('sea.jpg');
background-repeat: no-repeat;
width:100%;
height: 200px;
}
/*hr {
border: 0;
clear:both;
display:block;
width: 96%;
color: #FFFF00;
height: 1px;
}*/
/*Responsive layout- when the screen is less than 700px wide, make the two columns stack on top of each other*/
@media screen and (max-width: 700px){
.row,.navbar{
flex-direction: column;
}
}
/**/
/*image slide*/
.mySlides1 {
display: none;
box-shadow: 3px 3px 4px rgba(245, 241, 241, 0.3);
height:400px;
object-fit:scale-down;
width: 100%;
overflow: hidden;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin:auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #e7f2f4;
color: rgb(43, 0, 255);
}
/**/
/*buttonquantity*/
.wrapper{
height:50px;
width: 180px;
margin-left: 15px;
display:flex;
align-items: center;
justify-content: center;
background: rgb(226, 240, 252);
border-radius: 12px;
box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}
.wrapper span{
width:100px;
text-align: center;
font-size: 25px;
font-weight: 600;
cursor: pointer;
}
.wrapper span.num{
font-size: 20px;
border-right: 2px solid rgba(0,0,0,0.2);
border-left: 2px solid rgba(0,0,0,0.2);
pointer-events: none;
}
/**/
/*buttonA*/
.buttonA {
display: inline-block;
border-radius: 4px;
background-color: #000e5e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 15px;
width: 195px;
transition: all 0.5s;
cursor: pointer;
margin-left: 15px;
}
.buttonA span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.buttonA span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.buttonA:hover span {
padding-right: 25px;
}
.buttonA:hover span:after {
opacity: 1;
right: 0;
}
.side a:link{
color: black;
text-decoration: none;
}
.side a:visited{
color: black;
text-decoration: none;
}
.side a:active{
color: rgb(233, 138, 138);
}
/**/
</style>
</head>
<body>
<!--note-->
<!--header-->
<div ><ul>
<a href="home.php"><img src="logo1.png" alt=""></a>
<li><a href="home.php">HOME</a></li>
<li><a href="aboutusXX.php">ABOUT US</a></li>
<li><a href="catalog2.php">CATALOG</a>
<ul>
<li><a href="wholefish.php">WHOLE FISH</li></a>
<li><a href="fillet.php">FISH FILLET</li></a>
<li><a href="catalog2.php">OTHER</li></a>
</ul>
</li>
<li><a href="T&C.php">TERMS & CONDITIONS</a></li>
<li><a href="FAQ.php">FAQ</a></li>
<div >
<?php
if (!empty($_SESSION['fullname'])){
?>
<li><a href="#">USER</a>
<ul>
<li><a href="profile1.php">PROFILE</li></a>
<li><a href="logout.php">LOGOUT</li></a>
</ul>
</li>
<?php
} else{
echo '<li><a href="login.php">LOGIN</a></li>';
}
?>
<li><a href="cart.php">CART</a></li>
</div>
</ul>
</div>
<div >
<h1>Fresh Salmon</h1>
</div>
<!--flexible grid (content)-->
<div >
<div ><br>
<a href="home.php">Home   >   </a>
<a href="catalog2.php">Catalog   >    </a>
<a href="product2.php">Fresh Samon</a>
<br><br><br><br>
<div >
<div >
<img src="samon.jpg" style="width:100%" >
</div>
<div >
<img src="samon6.jpg" style="width:100%" >
</div>
<div >
<img src="samon3.jpg" style="width:100%" >
</div>
<div >
<img src="samon4.jpg" style="width:100%" >
</div>
</div>
</div>
</head>
<body>
<form id="form1" >
<div>
<div >
<div >
<h1>SALMON</h1>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<div >
<div >
<img src="samon.jpg" alt="" >
<span >1x =</span>
<span >RM259.90</span>
<input type="number" value="1" />
<button >X</button>
</div>
</div>
<div >
<button >Checkout</button>
<button >Clear Cart</button>
</div>
<div >
<strong >Total</strong>
<span >RM0</span>
</div>
</div>
</div>
</div>
</div>
</form>
<script>
let removeCartItemButtons = document.querySelectorAll('.delete-cart');
for (let i = 0; i < removeCartItemButtons.length; i ) {
let button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}
let quantityInputs = document.querySelectorAll('.quantity-input');
for (let i = 0; i < quantityInputs.length; i ) {
let input = quantityInputs[i]
input.addEventListener('change', quantityChanged);
}
function removeCartItem(event) {
let buttonCliked = event.target;
buttonCliked.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged() {
let input = event.target;
if (isNaN(input.value) || input.value <= 0) {
input.value = 1;
}
updateCartTotal()
}
function getTotal() {
price = document.getElementsByClassName("price");
quantities = document.getElementsByClassName("qty");
let total = 0
for (let i = 0; i < price.length; i ) {
total = total parseInt(quantities[i].textContent) * parseInt(price[i].textContent);
}
console.log(total);
}
</script>
</div>
<!--footer-->
<footer >
<div class= "footer-left">
<img src="logo1.png" style= "height: 120px">
<p>We are a group of seafood connoisseurs who has been supplying the finest seafoods to 4- and 5-star hotels and retailers over the last 20 years. Our new platform, The Finest Catch, aims to make imported seafoods accessible and affordable to every household in our covered area.</p>
<div >
<a href="https://www.facebook.com"><i ></i></a>
<a href="https://twitter.com"><i ></i></a>
<a href="https://www.youtube.com"><i ></i></a>
<a href="https://www.instagram.com"><i ></i></a>
</div>
</div>
<ul >
<li>
<h2>Quick Links</h2>
<ul >
<li><a href="home.php">HOME</a></li>
<li><a href="aboutusXX.php">ABOUT US</a></li>
<li><a href="catalog2.php">CATALOG</a></li>
<li><a href="T&C.php">TERM & CONDITIONS</a></li>
<li><a href="FAQ.php">FAQ</a></li>
</ul>
</li>
<li >
<h2>Our Products</h2>
<ul >
<li><a href="wholefish.php">WHOLE FISH</a></li>
<li><a href="fillet.php">FISH FILLET</a></li>
<li><a href="catalog2.php">OTHER</a></li>
</ul>
</li>
<li >
<h2>Address</h2>
<ul >
<p>No.11, Jalan Muara Tabuan Sama Jaya 4/A, Taman Muara Tabuan, 93350, Johor Bahru, Malaysia.</p>
</ul>
</li>
</ul>
<div >
<p>Copyright © 2023 TTC Online Fishery Market. E-commerce Powered by EasyStore</p>
</div>
</footer>
</body>
<script>
var slideIndex = [1];
var slideId = ["mySlides1"]
showSlides(1, 0);
function plusSlides(n, no) {
showSlides(slideIndex[no] = n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i ) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</body>
</html>
CodePudding user response：
You need to add to the total ( =) and not assign to the total (=) each time
Your total = (price * quantity) only does the last.
What is click-cart? It looks empty Why do you have HTML in the head of the page?
Here is a better alternative to all your code.
I changed the container to form1 and changed the clear cart to type="button"
window.addEventListener("DOMContentLoaded",() => {
const form = document.getElementById("form1");
const updateCartTotal = () => {
let cartRows = form.querySelectorAll('.cart-row');
document.querySelector('.cart-total-price').innerText = 'RM' [...cartRows]
.map(cartRow => {
const price = cartRow.querySelector('.shop-price').innerText.replace('RM', '');
const quantity = cartRow.querySelector('.quantity-input').value;
return price * quantity;
})
.reduce((a, b) => a b, 0) // the 0 is needed here in case there are no rows.
.toFixed(2);
};
form.addEventListener("input", function(e) {
if (e.target.matches(".quantity-input")) updateCartTotal();
});
form.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.matches(".delete-cart")) {
tgt.closest(".cart-row").remove()
updateCartTotal()
return;
}
if (tgt.matches(".clear-cart")) {
document.querySelectorAll(".cart-row").forEach(row => row.remove())
updateCartTotal()
return;
}
});
updateCartTotal()
});<form id="form1">
<div>
<div >
<div >
<h1>SALMON</h1>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<div >
<div >
<img src="samon.jpg" alt="" >
<span >1x =</span>
<span >RM259.90</span>
<input type="number" value="1" />
<button >X</button>
</div>
</div>
<div >
<div >
<img src="samon.jpg" alt="" >
<span >1x =</span>
<span >RM259.90</span>
<input type="number" value="1" />
<button >X</button>
</div>
</div>
<div >
<div >
<img src="samon.jpg" alt="" >
<span >1x =</span>
<span >RM259.90</span>
<input type="number" value="1" />
<button >X</button>
</div>
</div>
<div >
<button >Checkout</button>
<button type="button" >Clear Cart</button>
</div>
<div >
<strong >Total</strong>
<span >RM0</span>
</div>
</div>
</div>
</div>
</div>
</form>