Javascript 当我尝试更改购物车的数量时，控制台返回错误

我正在制作一个购物车，我正在使用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>

项目
价格
量
全部的
红糖
€1.59
去除
苏打面包
€2.99
去除
牛奶
€0.99
去除
全部的
€5.57

以下是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);
  }
}

var removeCartItems=document.getElementsByClassName（“buttonRemoved”）；
console.log（removeCartItems）；
对于（变量i=0；i

使用

document.getElementById（）

---

这将解决错误。

函数名为“getElementById”而不是“getElementsById”，我已将其更改为element，但控制台仍显示dairyItemsContainer.getElementById不是函数它需要是

文档。getElementById

谢谢！现在，当我删除控制台时，它不会返回错误