从输入值中获取未定义

Question

我无法获得输入的值，问题出在quantityElement.Value上，它一直返回未定义的值。
因此，您将在下面找到我的 HTML 和 JS 中遇到问题的部分。 在我的 javascript function 中，当我尝试获取其输入值时， quantityElement一直给出未定义的值。

这是我的 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

首先，我从这个元素中删除了“购物车价格”class：

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

并向按钮添加“onclick”

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

然后，从 js 中更改一些内容，例如：

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;
}