控制台无输出：priceElement与quantityElement无法获取预期值求助

问题描述 #

控制台打印priceElement和quantityElement无任何输出，预期从priceElement获取799.99，从quantityElement获取值1，但未得到返回结果。

代码片段 #

JavaScript代码 #

// The javascript

var removecartitembuttons = document.getElementsByClassName('btn-warning')
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')
  for (var i = 0; i < CartRows.length; i++) {
    var CartRow = CartRows[i]
    var priceElement = CartRow.getElementsByClassName('cart-price')[0]
    var quantityElement = CartRow.getElementsByClassName('checkout-input')[0]
    console.log(priceElement, quantityElement)
  }
}

HTML代码 #

<div class="cart-items">
  <div class="cart-row">
    <div class="cart-item cart-column">
      <img class="checkout-cpu" src="Images/Cpu.jpg" width="100" height="100">
      <span class="checkout-item">CPU</span>
    </div>
    <span class="cart-column cart-price">$799.99</span>
    <div class="cart-quantity cart-column">
      <input class="checkout-input" type="number" value="1">
      <button class="btn btn-warning" role="button">REMOVE</button>
    </div>
  </div>
  <div class="cart-total">
    <strong class="cart-sum">SUM</strong>
    <span class="cart-sum-amount">$800</span>
  </div>
  <button class="btn btn-primary btn-checkout" role="button">Check Out</button>
</div>

问题原因 #

1. 触发时机错误：当前仅点击REMOVE按钮时会调用UpdateCartTotal，但点击后对应的cart-row元素会被删除，此时cart-items内已无cart-row，循环无法执行，导致无输出。
2. 缺少必要触发场景：页面加载完成、点击Check Out按钮、修改数量输入框时，均未触发UpdateCartTotal函数。
3. 未提取实际值：当前代码仅打印DOM元素本身，未提取priceElement的文本内容和quantityElement的输入值。

修复方案 #

修改JavaScript代码，补充触发时机并提取实际值：

// 页面加载完成后初始化调用
document.addEventListener('DOMContentLoaded', function() {
  UpdateCartTotal();
  
  // 给Check Out按钮添加点击事件
  const checkoutBtn = document.getElementsByClassName('btn-checkout')[0];
  checkoutBtn.addEventListener('click', UpdateCartTotal);
  
  // 给数量输入框添加change事件
  const quantityInputs = document.getElementsByClassName('checkout-input');
  for (let i = 0; i < quantityInputs.length; i++) {
    const input = quantityInputs[i];
    input.addEventListener('change', UpdateCartTotal);
  }
});

var removecartitembuttons = document.getElementsByClassName('btn-warning')
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')
  let 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('checkout-input')[0]
    
    // 提取实际值
    const price = parseFloat(priceElement.textContent.replace('$', ''));
    const quantity = parseInt(quantityElement.value);
    
    console.log('价格:', price, '数量:', quantity);
    total += price * quantity;
  }
  // 更新总价显示
  const totalElement = document.getElementsByClassName('cart-sum-amount')[0];
  totalElement.textContent = '$' + total.toFixed(2);
}

说明 #

• 页面加载完成后自动调用UpdateCartTotal，初始化即可看到输出；
• 点击Check Out按钮或修改数量时，都会触发函数更新总价并打印值；
• 提取价格时移除$符号并转为数字，数量转为整数，同时计算并更新总价显示。

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