Why do my total cart price not compute correctly?

Question

I am doing a school project of designing an ecommerce webpage. I am new to this and is facing some problem at the shopping cart check out portion. Would really appreciate any help from you guys ! :)

There's already an item (let's call it item A) in the cart every time the webpage reload. I am able to get a correct total price computation for every increasing quantity of item A in the cart. However, when I add another item into the cart and increase the quantity of the newly added item , the total price won't update. I also noticed that when I increase the quantity of item A when there is other items in the cart. The total price = (quantity * total amount) in the cart instead of computing just the price of item.

Here's the js, css and html code:

if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', ready)
} else {
  ready()
}

function ready() {
  var removeCartItemButtons = document.getElementsByClassName('btn-1');
  console.log(removeCartItemButtons)
  for (var i = 0; i < removeCartItemButtons.length; i++) {
    var button = removeCartItemButtons[i]
    button.addEventListener('click', removeCartItem)
  }

  var quantityInputs = document.getElementsByClassName('cart-quantity-input')
  for (var i = 0; i < quantityInputs.length; i++) {
    var input = quantityInputs[i]
    input.addEventListener('change', quantityChanged)
  }

  var addToCartButtons = document.getElementsByClassName('btn-2')
  for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i]
    button.addEventListener('click', addToCartClicked)
  }

  document.getElementsByClassName
}

function removeCartItem(event) {
  var buttonClicked = event.target
  buttonClicked.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.remove()
  updateCartTotal()
}

function quantityChanged(event) {
  var input = event.target
  if (isNaN(input.value) || input.value <= 0) {
    input.value = 1
  }
  updateCartTotal()
}

function addToCartClicked(event) {
  var button = event.target
  var shopItem = button.parentElement
  var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
  var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
  var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
  console.log(title, price, imageSrc)
  addItemToCart(title, price, imageSrc)
  updateCartTotal()
}

function addItemToCart(title, price, imageSrc) {
  var cartRow = document.createElement('div')
  cartRow.classList.add()
  var cartItems = document.getElementsByClassName('cart-items')[0]
  var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
  for (var i = 0; i < cartItemNames.length; i++) {
    if (cartItemNames[i].innerText == title) {
      alert('This item is already been added to the cart')
      return
    }
  }
  var cartRowContents = `  
                 
                  
                   
                    
                    
                       
                       
                           ${title}
                           Price: ${price}
                           

                           
                       
                   
               
               
                ${price}
               
                
                
           `
  cartRow.innerHTML = cartRowContents
  cartItems.append(cartRow)
  cartRow.getElementsByClassName('btn-1')[0].addEventListener('click', removeCartItem)
  cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}


function updateCartTotal() {
  var cartItemContainer = document.getElementsByClassName('cart-items')[0]
  var cartRows = cartItemContainer.getElementsByClassName('cart-row')
  var total = 0
  for (var i = 0; i < cartRows.length; i++) {
    var cartRow = cartRows[i]
    var quantityElement = cartItemContainer.getElementsByClassName('cart-quantity-input')[0]
    var priceElement = cartRow.getElementsByClassName('cart-price')[0]
    var price = parseFloat(priceElement.innerHTML.replace('$', ''))
    var quantity = quantityElement.value
    total = total + (price * quantity)
  }
  total = (Math.round(total * 100) / 100).toFixed(2)
  document.getElementsByClassName('cart-total-price')[0].innerHTML = '$' + total
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  display: flex;
  align-items: center;
  padding: 20px;
}

nav {
  flex: 1;
  text-align: right;
}

nav ul {
  display: inline-block;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  margin-right: 10px;
}

a {
  text-decoration: none;
  color: black;
}

p {
  color: black;
}

.container {
  max-width: 1300px;
  margin: auto;
  padding-left: 50px;
  padding-right: 50px;
}

.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
}

.col-2 {
  flex-basis: 50%;
  min-width: 400px;
}

.col-2 img {
  max-width: 100%;
  padding: 50px 0;
}

.col-2 h1 {
  font-size: 50px;
  line-height: 60px;
  margin: 25px 0;
}

.btn {
  display: inline-block;
  background: #ff523b;
  color: #fff;
  padding: 8px 18px;
  margin: 30px 0;
  border-radius: 30px;
  cursor: pointer;
  outline: none;
}

.col-4 {
  flex-basis: 25%;
  padding: 10px;
  min-width: 200px;
  margin-bottom: 50px;
  transition: transform 0.5s;
}

.col-4 img {
  width: 100%;
}

.small-container {
  max-width: 1080px;
  margin: auto;
  padding-left: 50px;
  padding-right: 50px;
}

.title {
  text-align: center;
  margin: 0 auto 30px;
  position: relative;
  line-height: 50px;
  color: black
}

.title::after {
  content: '';
  background: black;
  width: 80px;
  height: 5px;
  border-radius: 5px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.col-4:hover {
  transform: translateY(-5px);
}

.btn-2 {
  display: inline-block;
  background: #ff523b;
  color: #fff;
  padding: 8px 18px;
  margin: 30px 0;
  border-radius: 30px;
  cursor: pointer;
  border: none;
  outline: none;
}


/*------footer-----*/

.footer {
  background: #000;
  color: #8a8a8a;
  font-size: 14px;
  padding: 40px 0 20px;
}

.footer-col-1 {
  min-width: 250px;
  margin-bottom: 10px;
  flex-basis: 30%;
  flex: 1;
  text-align: center;
}

.footer-col-1 img {
  width: 200px;
  margin-bottom: 20px;
}

.footer p {
  color: #8a8a8a;
}


/*------cart-----*/

.cart-page {
  margin: 80px auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.cart-info {
  display: flex;
  flex-wrap: nowrap;
}

th {
  text-align: justify;
  padding: 5px;
  color: #fff;
  background: #ff523b;
  font-weight: normal;
}

td {
  padding: 10px 5px;
  width: 1px;
}

td input {
  width: 45px;
  height: 30px;
  padding: 5px;
  border-radius: 30px;
  text-align: right;
}

td a {
  color: #ff523b;
  font-size: 10px;
}

td img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.btn-1 {
  display: inline-block;
  background: #ff523b;
  color: #fff;
  padding: 8px 10px;
  margin: 3px 0;
  border-radius: 30px;
  font-size: 10px;
  cursor: pointer;
  border: none;
  outline: none;
}

.total-price {
  display: flex;
  justify-content: flex-end;
}

.total-price table {
  border-top: 3px solid #ff523b;
  width: 100%;
  max-width: 350px;
  margin: 30px 0;
}

td:last-child {
  text-align: right;
}

th:last-child {
  text-align: right;
}

.btn-purchase {
  display: inline-block;
  background: #ff523b;
  color: #fff;
  padding: 8px 40px;
  margin: 30px 0;
  border-radius: 30px;
  outline: none;
  border: none;
  cursor: pointer;
}

.btn-purchase:hover {
  transform: translateY(-3px);
}

.btn-1:hover {
  transform: translateY(-1px);
}

.cart-item {
  width: 60%;
}


/*------------ account page --------------*/

.account-page {
  padding: 50px 0;
}

.form-container {
  background: #fff;
  width: 300px;
  height: 300px;
  position: relative;
  text-align: center;
  padding: 20px 0;
  margin: auto;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.form-container span {
  font-weight: bold;
  padding: 0 10px;
  color: #555;
  cursor: pointer;
  width: 100px;
  display: inline-block;
}

.form-btn {
  display: inline-block;
}

.form-container form {
  max-width: 300px;
  padding: 0 20px;
  position: absolute;
  top: 130;
  transition: transform 1s;
}

form input {
  width: 100%;
  height: 30px;
  margin: 10px 0;
  padding: 0 10px;
  border: 1px solid #ccc;
}

form .btn {
  width: 100%;
  border: none;
  cursor: pointer;
  margin: 10px 0;
}

form .btn:focus {
  outline: none;
}

#LoginForm {
  left: -300px;
}

#RegForm {
  left: 0;
}

form a {
  font-size: 12px;
}

#Indicator {
  width: 100px;
  border: none;
  background: #ff523b;
  margin-top: 8px;
  height: 3px;
  transform: translateX(100px);
  transition: transform 1s;
}





  
  Internet Security PBIL
  
  





  
    
      
        
      
      
        
          Home
          Account
        
      
    
    
      
        Good Sport 
Good game!
        Come buy our good items now!
        Explore Now
      
      
        
      
    
  

  
  
    Shirt
    
      
        
        Red
        $10.00
        
      
      
        
        Blue
        $20.00
        
      
      
        
        Green
        $30.00
        
      
      
        
        Yellow
        $40.00
        
      
    
    Shorts
    
      
        
        1 printed t-shirt
        $50.00
        
      
      
        
        2 printed t-shirt
        $60.00
        
      
      
        
        3 printed t-shirt
        $70.00
        
      
      
        
        4 printed t-shirt
        $80.00
        
      
    
  

  
  
    Cart
    
      
        Product
        Quantity
        Subtotal
      
    

    
      
        
          
            
              
              
                Red Printed Tshirt
                Price: $50.00
                

                
              
            
          
          
          $50.10
          
        
      
    

    

    
      
        
          Total
          $50.50
        
        
          
            
          
        
      
    
  

  
  
    
      
        Products brought to you by Yeet!

Thank you guys for your help! (ps: please ignore the naming of my items as is not finalize yet haha,cheers!)

Turo · Accepted Answer

Ah, it was hard to see, so I made an answer of it:

you used once cartItemContainer instead of cartRow, so you couldn't understand my comment... :-)

var quantityElement = cartItemContainer.getElementsByClassName('cart-quantity-input') [0]  <- should be cartRow
var priceElement = cartRow.getElementsByClassName('cart-price')[0]

Why do my total cart price not compute correctly?

Answers (1)

Related Questions