Why i keep getting this Total: £NaN when i hit remove button ,instead of Total:£19.99 .? Nan Error is not goin away i dont think i have any more idea

Why do I keep getting this Total: £NaN when I hit the remove button, instead of Total:£19.99 .? Nan Error is not going away I don’t think I have any more idea What am I doing wrong guys. and I would like it to display the total value but it keeps Total NAN Thanks for helping

var removeCartItemButtons = document.getElementsByClassName("btn-danger");
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.remove()
    updateCartTotal()
  })

}

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")[0];
    var price = parseFloat(priceElement.innerText.replace('£', ""));
    var quantity = quantityElement.Value;
    total = total + (price * quantity);
  }
  document.getElementsByClassName("cart-total-price")[0].innerText = "£" + total;
}

'

<div class="cart-items">
  <!---cart-row start------------>
  <div class="cart-row ">
    <div class="cart-item cart-column">
      <img class="cart-image-item" src="a1.jpg" alt="img" 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" type="number" value="1">
      <button class="btn btn-danger" type="button">Remove</button>
    </div>

  </div>
  <!--cart-row-end----------->


  <div class="cart-row ">
    <div class="cart-item cart-column">
      <img class="cart-image-item" src="a2.jpg" alt="img" width="100" height="100">
      <span class="cart-item-title">Album 3</span>
    </div>
    <span class="cart-price cart-column">£9.99</span>
    <div class="cart-quantity cart-column">
      <input class="cart-quantity" type="number" value="2">
      <button class="btn btn-danger" type="button">Remove</button>
    </div>

  </div>
</div>
<!--cart-items-end----------->
<div class="cart-total">
  <strong class="cart-item-title">Total:</strong>
  <span class="cart-total-price">£39.99</span>
</div>

Answer

You have at least two typos. There is a single quote at the end of your JavaScript code and you have var quantity = quantityElement.Value; instead of var quantity = quantityElement.value;. After I fixed it quantity is undefined and price * quantity is NaN.

The selector

cartRow.getElementsByClassName("cart-quantity")[0]

returns this element

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

This element doesn’t have a value attribute. You mean

<input class="cart-quantity" type="number" value="2">

This element can be selected with

cartRow.getElementsByClassName("cart-quantity")[1]

Example:

var removeCartItemButtons = document.getElementsByClassName("btn-danger");
for (var i = 0; i < removeCartItemButtons.length; i++) {
  var button = removeCartItemButtons[i];
  button.addEventListener("click", function(event) {
    var buttonClicked = event.target;
    buttonClicked.parentElement.parentElement.remove()
    updateCartTotal()
  })

}

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")[1];
    var price = parseFloat(priceElement.innerText.replace('£', ""));
    var quantity = quantityElement.value;
    total = total + (price * quantity);
  }
  document.getElementsByClassName("cart-total-price")[0].innerText = "£" + total;
}

<div class="cart-items">
  <!---cart-row start------------>
  <div class="cart-row ">
    <div class="cart-item cart-column">
      <img class="cart-image-item" src="a1.jpg" alt="img" 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" type="number" value="1">
      <button class="btn btn-danger" type="button">Remove</button>
    </div>

  </div>
  <!--cart-row-end----------->


  <div class="cart-row ">
    <div class="cart-item cart-column">
      <img class="cart-image-item" src="a2.jpg" alt="img" width="100" height="100">
      <span class="cart-item-title">Album 3</span>
    </div>
    <span class="cart-price cart-column">£9.99</span>
    <div class="cart-quantity cart-column">
      <input class="cart-quantity" type="number" value="2">
      <button class="btn btn-danger" type="button">Remove</button>
    </div>

  </div>
</div>
<!--cart-items-end----------->
<div class="cart-total">
  <strong class="cart-item-title">Total:</strong>
  <span class="cart-total-price">£39.99</span>
</div>