PLZZ HELP (JS Shopping cart isn't working)

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 ) &amp;&amp; qty &gt; 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 ) &amp;&amp; qty &gt; 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 ) &amp;&amp; qty &gt; 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>

I took a look and see a few things.

There is a duplicate function that I just commented out;

lines 17-37ish; the first updateTotalCart()

Has 2 things; should be:
var p = priceContainerElement.firstElementChild.innerText.replace('$','')

  • missing the = operator and firstElementChild firstChild is targeting the whitespace

https://www.w3schools.com/jsref/prop_node_firstchild.asp

First thanks @pjonp. I’ve corrected these mistakes but still cart is not working! :expressionless:

Tell us what you are expecting it to do that it is not doing.

updateTotalCart() function to update the cart whenever cart quantity changes

can you post updated codePed? your link still has lines 17-37. When I comment them out the SubTotal updates:

You need to look at the browser’s console. You have an error message about an unexpected if statement. that you need to fix.

Sorry @pjonp !! I couldn’t understand what you are saying . Can you tell me clearly !! :grinning:

Yeah! I know. But I think nothing wrong with my if statement. What do you think?

Take a look at the screenshot I posted above. Lines 17 though 37 are commented out.

This is because you have 2 of these updateTotalCart functions. Only the second one is needed.

The if error is on line 25. Take a close look at what is going on when you try to define price.

if you use “Analyze JS” you get an unrecoverable syntax error because your first character after the comment is a closing bracket

Thanks @pjonp ! It’s working.