Hi fellow fcc programmers !! I am creating a shopping cart for an e-commerce site. So far I’ve created updateTotalCart() function to update the cart whenever cart quantity changes. But it isn’t working !! I’ve checked and double-checked the code and found nothing wrong. So if you guys help me, it would be a great help. Here is the site’s Codepen link and I’ve given the JS and HTML codes below.
JS code:
if (document.readyState == 'loading'){
document.addEventListener('DOMContentLoaded', ready)
}
else{
ready()
}
function ready(){
var quantityInputs=document.getElementsByClassName('qty-text')
for(var i=0;i<quantityInputs.length;i++){
var quantityInput=quantityInputs[i]
quantityInput.addEventListener('change', quantityChanged)
}
}
function quantityChanged(event){
updateTotalCart()
}
function updateTotalCart(){
var cartTableRows= document.getElementsByClassName('cart-table-row')
var total=0
for(i=0;i<cartTableRows.length;i++){
var cartTableRow=cartTableRows[i]
var quantityElement=cartTableRow.getElementsByClassName('qty-text')[0]
var quantity= quantityElement.value
var priceContainerElement= cartTableRow.getElementsByClassName('price')[0]
var price=parseFloat(if(document.readyState == 'loading'){
document.addEventListener('DOMContentLoaded', ready)
}
else{
ready()
}
function ready(){
var quantityInputs=document.getElementsByClassName('qty-text')
for(var i=0;i<quantityInputs.length;i++){
var quantityInput=quantityInputs[i]
quantityInput.addEventListener('change', quantityChanged)
}
}
function quantityChanged(event){
updateTotalCart()
}
function updateTotalCart(){
var cartTableRows= document.getElementsByClassName('cart-table-row')
var total=0
for(i=0;i<cartTableRows.length;i++){
var cartTableRow=cartTableRows[i]
var quantityElement=cartTableRow.getElementsByClassName('qty-text')[0]
var quantity= quantityElement.value
var priceContainerElement= cartTableRow.getElementsByClassName('price')[0]
var p priceContainerElement.firstChild.innerText.replace('$','')
var price=parseFloat(p)
total=total+(price*quantity)
}
document.getElementsByClassName('cart-subtotal')[0].innerText='$'+total
}
HTML code:
<div class="col-12 col-lg-8">
<div class="cart-title mt-50">
<h2>Shopping Cart</h2>
</div>
<div class="cart-table clearfix">
<table class="table table-responsive">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr class="cart-table-row">
<td class="cart_product_img">
<a href="#"><img src="img/bg-img/cart1.jpg" alt="Product"></a>
</td>
<td class="cart_product_desc">
<h5>White Modern Chair</h5>
</td>
<td class="price">
<span>$130</span>
</td>
<td class="qty">
<div class="qty-btn d-flex">
<p>Qty</p>
<div class="quantity">
<span class="qty-minus" onclick="var effect = document.getElementById('qty'); var qty = effect.value; if( !isNaN( qty ) && qty > 1 ) effect.value--;return false;"><i class="fa fa-minus" aria-hidden="true"></i></span>
<input type="number" class="qty-text" id="qty" step="1" min="1" max="300" name="quantity" value="1">
<span class="qty-plus" onclick="var effect = document.getElementById('qty'); var qty = effect.value; if( !isNaN( qty )) effect.value++;return false;"><i class="fa fa-plus" aria-hidden="true"></i></span>
</div>
</div>
</td>
</tr>
<tr class="cart-table-row">
<td class="cart_product_img">
<a href="#"><img src="img/bg-img/cart2.jpg" alt="Product"></a>
</td>
<td class="cart_product_desc">
<h5>Minimal Plant Pot</h5>
</td>
<td class="price">
<span>$10</span>
</td>
<td class="qty">
<div class="qty-btn d-flex">
<p>Qty</p>
<div class="quantity">
<span class="qty-minus" onclick="var effect = document.getElementById('qty2'); var qty = effect.value; if( !isNaN( qty ) && qty > 1 ) effect.value--;return false;"><i class="fa fa-minus" aria-hidden="true"></i></span>
<input type="number" class="qty-text" id="qty2" step="1" min="1" max="300" name="quantity" value="1">
<span class="qty-plus" onclick="var effect = document.getElementById('qty2'); var qty = effect.value; if( !isNaN( qty )) effect.value++;return false;"><i class="fa fa-plus" aria-hidden="true"></i></span>
</div>
</div>
</td>
</tr>
<tr class="cart-table-row">
<td class="cart_product_img">
<a href="#"><img src="img/bg-img/cart3.jpg" alt="Product"></a>
</td>
<td class="cart_product_desc">
<h5>Minimal Plant Pot</h5>
</td>
<td class="price">
<span>$10</span>
</td>
<td class="qty">
<div class="qty-btn d-flex">
<p>Qty</p>
<div class="quantity">
<span class="qty-minus" onclick="var effect = document.getElementById('qty3'); var qty = effect.value; if( !isNaN( qty ) && qty > 1 ) effect.value--;return false;"><i class="fa fa-minus" aria-hidden="true"></i></span>
<input type="number" class="qty-text" id="qty3" step="1" min="1" max="300" name="quantity" value="1">
<span class="qty-plus" onclick="var effect = document.getElementById('qty3'); var qty = effect.value; if( !isNaN( qty )) effect.value++;return false;"><i class="fa fa-plus" aria-hidden="true"></i></span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="cart-summary">
<h5>Cart Total</h5>
<ul class="summary-table">
<li><span>subtotal:</span> <span class="cart-subtotal" >$140.00</span></li>
<li><span>delivery:</span> <span>Free</span></li>
<li><span>total:</span> <span class="cart-total">$140.00</span></li>
</ul>
<div class="cart-btn mt-100">
<a href="cart.html" class="btn amado-btn w-100">Checkout</a>
</div>
</div>
</div>
