尝试更改购物车数量时控制台返回错误

Question

我正在制作一个购物车，我正在使用 javascript 来制作删除和数量按钮。我不明白我的代码哪里出错了。该教程说我的控制台在我登录时应该返回变量 priceElement 和 quantityElement 。但是，当我这样做时，我的控制台没有任何显示。此外，当我从购物车中移除商品时，控制台会显示“dairyItemsContainer.getElementById 不是函数”。我希望能够在有人删除项目时使总数、价格和删除按钮保持同步，以便更新总数。有人可以帮忙吗？

这是购物车的 html：

<div>
<table>

  <thead>
    <tr>
      <th>Items</th>
      <th>Price</th>
      <th>Quantity</th>
      <th></th> <!--- remove --->
      <th>Total</th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td>Brown Sugar</td>
      <td id='price'>€1.59</td>
      <td class='quantity'><input class="quantity" name="quantity[]" type="text" value="2"></td>
      <td><button type="button" name="button" id='buttonCart' class='buttonRemoved'>Remove</button></td>
    </tr>

    <tr>
      <td>Soda Bread</td>
      <td id='price'>€2.99</td>
      <td class='quantity'><input class="quantity" name="quantity[]" type="text" value="1"></td>
      <td><button type="button" name="button" id='buttonCart' class='buttonRemoved'>Remove</button></td>
    </tr>

    <tr>
      <td>Milk</td>
      <td id='price'>€0.99</td>
      <td class='quantity'><input class="quantity" name="quantity[]" type="text" value="2"></td>
      <td style='float: left;'><button type="button" name="button" id='buttonCart' class='buttonRemoved'>Remove</button></td>
    </tr>

    <tr>
      <td></td>
      <td></td>
      <td class='totalFont'>Total</td>
      <td class='total'>€5.57</td>
    </tr>

  </tbody>
</table>

这是 JavaScript 代码：

var removeCartItems = document.getElementsByClassName("buttonRemoved");
console.log(removeCartItems);
for (var i = 0; i < removeCartItems.length; i++) {
  var button = removeCartItems[i];
  button.addEventListener("click", function (event) {
    var buttonClicked = event.target;
    buttonClicked.parentElement.parentElement.remove();
    updateTotal();
  });
}

function updateTotal() {
  var dairyItemsContainer = document.getElementsByClassName("dairyItems")[0];
  var cartRows = dairyItemsContainer.getElementById("dairyTotalHelp");
  for (var i = 0; i < cartRows.length; i++) {
    var cartRows = cartRows[i];
    var priceElement = cartRows.getElementsByClassName("price")[0];
    var quantityElement = cartRows.getElementsByClassName("quantity")[0];
    console.log(priceElement, quantityElement);
  }
}

Answer 1

使用document.getElementById()。

这将解决错误。