Uncaught ReferenceError: praseFloat is not defined-CodePudding

The code can't find the class from another variable in javascript (at cartRows = cartItemContainer).

    var cartItemContainer = document.getElementsByClassName('cart-items')[0]
    var cartRows = cartItemContainer.getElementsByClassName('cart-row')

All javascript code

console.log(removeCartItemButtons)
for (var i = 0; i < removeCartItemButtons.length; i  ) {
    var button = removeCartItemButtons[i]
    button.addEventListener('click', function(event) {
        var buttonClicked = event.target
        buttonClicked.parentElement.parentElement.parentElement.remove()
        updateCartTotal()
    })
}

function updateCartTotal() {
    var cartItemContainer = document.getElementsByClassName('cart-items')[0]
    var cartRows = cartItemContainer.getElementsByClassName('cart-row')
    for (var i = 0; i < cartRows.length; i  ) {
        var cartRow = cartRows[i]
        var priceElement = cartRow.getElementsByClassName('cart-price')[0]
        var quantityElement = cartRow.getElementsByClassName('cart-quantity-items')[0]
        var price = parseFloat(priceElement.innerText.replace('lei', ''))
        console.log(price)
    }
}

html code

<!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>Title</title>

    <link href="assets/css/style.css" rel="stylesheet" />
    <script src="cart.js" async></script>
</head>
.
.
.
.
.

                    <tbody >
                      <div >
                        <tr>
                          <td >
                            <a href="#/"><i ></i></a>
                          </td>
                          <td >
                            <a href="#/"><img src="assets/img/shop/cart/table1.jpg" alt="Image-HasTech"></a>
                          </td>
                          <td >
                            <h4 ><a href="single-product.html">Meta Slevless Dresss</a></h4>
                          </td>
                          <td ><span >70.00 lei</span></td>
                          <td >
                            <div >
                              <input type="text"  id="quantity" title="Quantity" value="1">
                            </div>
                          </td>
                          <td ><span >70.00 lei</span></td>
                        </tr>
                      </div>
                      <div >
                        <tr>
                          <td >
                            <a href="#/"><i ></i></a>
                          </td>
                          <td >
                            <a href="#/"><img src="assets/img/shop/cart/table2.jpg" alt="Image-HasTech"></a>
                          </td>
                          <td >
                            <h4 ><a href="single-product.html">Literature Classicals</a></h4>
                          </td>
                          <td ><span >79.00 lei</span></td>
                          <td >
                            <div >
                              <input  type="text" id="quantity" title="Quantity" value="1">
                            </div>
                          </td>
                          <td ><span >79.00 lei </span></td>
                        </tr>
                      </div>
                    </tbody>

CodePudding user response：

Uncaught ReferenceError: praseFloat is not defined

That would be because of a typo, it's parseFloat, not praseFloat. But that typo isn't in the code you've shown. There's no non-embedded environment where parseFloat would be "not defined."

The code can't find the class from another variable

That's because your HTML is invalid. You have a tbody with a div immediately inside it. That's invalid, tbody elements can't immediately contain div elements. So the browser will relocate it (either before or after the table), and as a result, there are no .cart-row elements inside the .cart-items element.

Put the class on the tr instead.