Getting undefined from input value

Question

I am unable to get the value of my input, the problem is with quantityElement.Value , which keeps returning undefined.
So, below you will find the part of my HTML and JS that I have trouble with. In my javascript function, the quantityElement keeps on giving an undefined when I try to get its value of the input.

This is my HTML:

<section class="container content-section">
    <h2 class="section-header">CART</h2>

    <div class="cart-items">

        <div class="cart-row">
            <span class="cart-item cart-header cart-column">ITEM</span>
            <span class="cart-price cart-header cart-column">PRICE</span>
            <span class="cart-quantity cart-header cart-column">QUANTITY</span>
        </div>

        <div class="cart-row">

            <div class="cart-item cart-column">

                <img class="cart-item-img" src="Images/product-1.jpg" width="100" height="100">
                <span class="cart-item-title">T-Shirt</span>

            </div>

            <span class="cart-price cart-column">$19.99</span>

            <div class="cart-quantity cart-column">
                <input class="cart-quantity-input" type="number" value="1">
                <button class="btn btn-danger" type="button">REMOVE</button>
            </div>
        </div>

        <div class="cart-row">

            <div class="cart-item cart-column">

                <img class="cart-item-img" src="Images/product-3.jpg" width="100" height="100">
                <span class="cart-item-title">PANTS</span>

            </div>

            <span class="cart-price cart-column">$19.99</span>

            <div class="cart-quantity cart-column">
                <input class="cart-quantity-input" type="number" value="2">
                <button class="btn btn-danger" type="button">REMOVE</button>
            </div>


        </div>
    </div>

    <div class="cart-total">
        <span class="cart-total-title">Total</span>
        <span class="cart-total-price">$39.98</span>
    </div>

    <button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>

</section>

Javascript:

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 priceElement = cartRow.getElementsByClassName("cart-price")[0];
    var quantityElement = cartRow.getElementsByClassName(
      "cart-quantity-input"
    )[0];
    var price = parseFloat(priceElement.innerText.replace("$", ""));
    var quantity = parseFloat(quantityElement.value);

    total = total + price * quantity;
  }
  document.getElementsByClassName("cart-total-price")[0].innerText = total;
}

Answer 1

Firstly, I removed 'cart-price' class from this element:

<span class=" cart-header cart-column">PRICE</span>

and added 'onclick' to button

<button onclick="updateCartTotal()" class="btn btn-primary btn-purchase" type="button">PURCHASE</button>

Then, changed something from js, for example:

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 priceElement = document.getElementsByClassName("cart-price")[0];
    var quantityElement = document.getElementsByClassName("cart-quantity-input")[0];
    var price = parseFloat(priceElement.innerText.replace("$", ""));
    var quantity = parseFloat(quantityElement.value);

    total = total + price * quantity;
  }
  document.getElementsByClassName("cart-total-price")[0].innerText = total;
}