Javascript 计算我的购买项目总数

我想通过在“购物袋总额”前面加上每件商品的购买总额（例如：2双鞋*价格单位+1个tshit*价格单位）来计算我的购买物品总数：

以下是描述图像：

我已经编写了一个功能代码，可以添加/删除产品，还可以计算每个项目的总购买量。代码的最后一部分是计算我的总购买量，它不起作用。我很困惑，我不知道如何解决它

这里是html5代码：

<div class="shopping-cart">
      <!-- Title -->
      <div class="title">
        Shopping Bag total : <input type="number" value="0" class="total-result-input" />
      </div>

      <!-- Product #1 -->
      <div class="item">
        <div class="buttons">
          <span class="delete-btn"></span>
          <span class="like-btn"></span>
        </div>

        <div class="image">
          <img src="item-1.png" alt="" />
        </div>

        <div class="description">
          <span>Common Projects</span>
          <span>Bball High</span>
          <span>White</span>
        </div>

        <div class="quantity">
          <button class="plus-btn" type="button" name="button""><img src="plus.svg" alt="" /></button>
          <input type="text" value="0" class="input-btn" />
          <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>

        </div>

        <div class="total-price" id="549"><input type="number" value="0" class="result-btn" /></div>

      </div>

      <!-- Product #2 -->
      <div class="item">
        <div class="buttons">
          <span class="delete-btn"></span>
          <span class="like-btn"></span>
        </div>

        <div class="image">
          <img src="item-2.png" alt=""/>
        </div>

        <div class="description">
          <span>Maison Margiela</span>
          <span>Future Sneakers</span>
          <span>White</span>
        </div>

        <div class="quantity">
          <button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
          <input type="text" value="0" class="input-btn" />
          <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
        </div>

        <div class="total-price" id="270"><input type="number" value="0" class="result-btn" /></div>
      </div>

      <!-- Product #3 -->
      <div class="item">
        <div class="buttons">
          <span class="delete-btn"></span>
          <span class="like-btn"></span>
        </div>

        <div class="image">
          <img src="item-3.png" alt="" />
        </div>

        <div class="description">
          <span>Our Legacy</span>
          <span>Brushed Scarf</span>
          <span>Brown</span>
        </div>

        <div class="quantity">
          <button class="plus-btn" type="button" name="button" ><img src="plus.svg" alt="" /></button>
          <input type="text" value="0" class="input-btn" />
          <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
        </div>

        <div class="total-price" id="349"><input type="number" value="0" class="result-btn" /></div>
      </div>
    </div>

购物袋总数：
共同项目
B高
白色
将它放在一个合理的函数中，并在每次更改（加号、减号）时调用此函数。
我刚刚添加

document.querySelector('.total-result-input').value = [].slice.call(document.querySelectorAll(".total-price > input")).reduce((acc, el) => acc + parseInt(el.value), 0)

在
事件的内部，单击
事件，一切都将正常工作


var items=document.querySelectorAll（'.item'）；
items.forEach（功能（项目）{
var minusButton=item.querySelector（'.减btn'）；
var plusButton=item.querySelector（'.plus btn'）；
var inputField=item.querySelector（'.input btn'）；
var resultField=item.querySelector（'.result btn'）；
minusButton.addEventListener（'click'，函数minusProduct（）{
var currentValue=编号（inputField.value）；
如果（当前值>0）{
inputField.value=当前值-1；
var x=item.querySelector（'.total price'）.id；
resultField=item.querySelector（'.result btn'）。value=x*inputField.value；
document.querySelector（“.total result input”）.value=[].slice.call（document.queryselectoral（“.total price>input”））.reduce（（acc，el）=>acc+parseInt（el.value），0）
}else inputField.value=0
});
plusButton.addEventListener（'click'，函数plusProduct（）{
var currentValue=编号（inputField.value）；
如果（当前值<100）{
inputField.value=当前值+1；
var x=item.querySelector（'.total price'）.id；
resultField=item.querySelector（'.result btn'）。value=Number（x）*Number（inputField.value）；
document.querySelector（“.total result input”）.value=[].slice.call（document.queryselectoral（“.total price>input”））.reduce（（acc，el）=>acc+parseInt（el.value），0）
}else inputField.value=100
});
});
const results=document.querySelectorAll（'.result btn'）；
设total=0；
results.forEach（（结果）=>{
总计+=结果值
});
document.querySelector（'.total result input'）。value=total

购物袋总数：
共同项目
B高
白色
如果是函数式的解决方案，但是作为一个初学者，你能解释一下你写的代码吗？首先，每次点击后我们都需要计算和，这就是为什么我要在“点击”事件函数第二个[].slice.call（document.queryselectoral（“.total price>input”））中添加代码。acc+parseInt（el.value），0）求和所有元素的值
const results = document.querySelectorAll('.result-btn');
let total = 0;

results.forEach((result) => {

   total += result.value

});
document.querySelector('.total-result-input').value = total;

document.querySelector('.total-result-input').value = [].slice.call(document.querySelectorAll(".total-price > input")).reduce((acc, el) => acc + parseInt(el.value), 0)