调整商品数量时购物车总价显示$NaN问题排查求助

核心错误分析 #

1. 数量元素获取错误：HTML中cart-quan-input是包裹input的<td>的类名，你当前代码获取到的是这个td元素而非内部的input，导致quantityElement.value为undefined，与price相乘后得到NaN。
2. 数量未转为数值类型：input的value默认是字符串，若未显式转换为数字，存在计算异常的潜在风险。
3. DOM层级操作冗余：删除商品的事件中，DOM层级定位过于繁琐，容易因为结构变动失效。

修复后的代码 #

JavaScript部分

// Update the price of cart based on the Quantity of items
const quantityChanged = (event) => {
  const input = event.target;
  if (isNaN(input.value) || input.value <= 0) {
    input.value = 1;
  }
  updateCartTotal();
}

const ready = () => {
  // 移除购物车商品
  const removeCartItemButtons = document.querySelectorAll('.far.fa-times-circle');
  removeCartItemButtons.forEach(button => {
    button.addEventListener('click', (event) => {
      // 直接找到最近的cart-row元素删除，避免层级依赖
      event.target.closest('.cart-row').remove();
      updateCartTotal();
    });
  });

  // 监听数量输入框变化
  const quantityInputs = document.querySelectorAll('.cart-quan-input input');
  quantityInputs.forEach(input => {
    input.addEventListener('change', quantityChanged);
  });
}

// 确保DOM加载完成后执行
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', ready);
} else {
  ready();
}

// 更新购物车总价
const updateCartTotal = () => {
  const cartRows = document.querySelectorAll('.cart-row');
  let total = 0;

  cartRows.forEach(cartRow => {
    const priceElement = cartRow.querySelector('.cart-price');
    const quantityInput = cartRow.querySelector('.cart-quan-input input');
    
    // 解析价格并处理异常
    const price = parseFloat(priceElement.innerText.replace('$', '')) || 0;
    // 解析数量并转为数字，默认1
    const quantity = parseInt(quantityInput.value, 10) || 1;
    
    total += price * quantity;
  });

  // 保留两位小数，格式化价格
  const formattedTotal = total.toFixed(2);
  document.getElementById('total-price').innerText = `$${formattedTotal}`;
  document.getElementById('cart-subtotal').innerText = `$${formattedTotal}`;
}

const sendProduct = () => {
  // 后续逻辑补充
}

HTML部分（调整初始总价以匹配商品价格）

<script src="https://kit.fontawesome.com/2480d3976a.js" crossorigin="anonymous"></script>

<section class="pro-details">
  <table width="100%">
    <thead>
      <tr>
        <td>Remove</td>
        <td>Image</td>
        <td>Product</td>
        <td>Price</td>
        <td>Quantity</td>
        <td>Subtotal</td>
      </tr>
    </thead>
    <tbody class="cart-items">
      <tr class="cart-row">
        <td><a href="#"><i class="far fa-times-circle"></i></a></td>
        <td><img class="table-img" src="img/north-face-puffer.png"></td>
        <td>South Face Puffer</td>
        <td class="cart-price">$90.00</td>
        <td class="cart-quan-input"><input type="number" value="1"></td>
        <td>$90.00</td>
      </tr>
    </tbody>
  </table>
</section>

<section class="cart-total">
  <h3>Cart Total</h3>
  <table>
    <tr>
      <td>Cart Subtotal</td>
      <td id="cart-subtotal">$90.00</td>
    </tr>
    <tr>
      <td>Shipping</td>
      <td>Free</td>
    </tr>
    <tr>
      <td>Total</td>
      <td id="total-price">$90.00</td>
    </tr>
  </table>

  <button type="submit">Checkout</button>
</section>

额外优化点 #

• 使用querySelectorAll替代getElementsByClassName，返回静态NodeList，避免动态集合的潜在问题。
• 用closest('.cart-row')定位要删除的商品行，DOM结构变动时更稳定。
• 对价格和数量解析添加默认值，防止解析失败导致NaN。
• 用toFixed(2)格式化总价，确保显示两位小数，符合价格展示规范。

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