JavaScript购物车功能中input元素value返回undefined问题求助

Hey Alex, I see exactly what's going on here! Let's break down the problem and fix it step by step.

The Root Cause #

Looking at your HTML, the first <div class="cart-row"> is the header row (with ITEM, PRICE, QUANTITY labels) — it doesn't have a cart-quantity-input field.

In your JavaScript loop, you start at i = 0, which means the first iteration tries to grab the quantity input from this header row. Since there's no input there, cartRow.getElementsByClassName("cart-quantity-input")[0] returns undefined, hence the error when you try to access .value.

The Fixes #

You have two clean ways to resolve this:

Option 1: Skip the Header Row in the Loop #

Simply start your loop from i = 1 instead of i = 0, since the first row is just the header:

function updateCartTotal() {
  var cartItemContainer = document.getElementsByClassName("cart-items")[0];
  var cartRows = cartItemContainer.getElementsByClassName("cart-row");
  var total = 0;
  // Start loop at index 1 to skip the header row
  for (var i = 1; 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;
  }
  // Format total to 2 decimal places for proper currency display
  document.getElementsByClassName("cart-total-price")[0].innerText = "$" + total.toFixed(2);
}

Option 2: Add a Distinct Class to the Header Row #

For better code clarity, rename the header row's class to something like cart-header-row, then only select the actual item rows:

Updated HTML Header Row:

<div class="cart-row cart-header-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>

Updated JavaScript:

function updateCartTotal() {
  var cartItemContainer = document.getElementsByClassName("cart-items")[0];
  // Only select cart rows that are NOT the header
  var cartRows = cartItemContainer.querySelectorAll(".cart-row:not(.cart-header-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.toFixed(2);
}

Bonus Tip #

I added toFixed(2) and re-added the $ symbol to the total output — this ensures your total displays properly as currency (e.g., $59.97 instead of 59.97).

内容的提问来源于stack exchange，提问作者Alex