为什么我一直得到这个 Total: £NaN 当我点击删除按钮时，而不是 Total:£19.99。？ Nan Error 不会消失，我想我没有更多的想法了

Question

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 1

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>