Javascript 用firebase产品数据填充HTML并获取总金额

通过执行以下操作，我正在填充自定义HTML以使用firebase数据创建“购物车”：

  snapshot.forEach((childSnapshot) => {

      var itemName = childSnapshot.key;
      var price = childSnapshot.val().price;
      var qty = childSnapshot.val().qty;
      var html = '';
      html += '<a class="list-group-item">';

      html +=  itemName + ' ($' + price + ")" ;

      html += '<span class="label label-default label-pill pull-xs-right" id="' + itemName + '">';
      html += '<input type="text" class="width-input form-control" value="' + qty + '">' ;
      html += '</span>';
      html += '</a>';

      $("#list-items").append(html);

snapshot.forEach（（childSnapshot）=>{
var itemName=childSnapshot.key；
var price=childSnapshot.val（）.price；
var qty=childSnapshot.val（）.qty；
var html=''；
html+='

每个项目的最终html为：

<a class="list-group-item">
   Bananas ($7.50)
   <span class="label label-default label-pill pull-xs-right" id="Bananas">
       <input type="text" class="width-input form-control" value="8">
   </span>
</a>


香蕉（7.50美元）

现在，我不知道如何检索每个项目的价格和数量，以便对成本进行最终计算。如果用户更改了文本输入的值，我如何才能获得新的数量？
因为您已经在循环搜索结果，您可以使用一个变量并在每次迭代中添加价格

    totalPrice += price;

或

如果他们更改了数量，请在输入元素上使用onChange（）监听器并重新运行计算。
的确如此，我的第一个想法是在用户进行所有必要的更改之前做一些事情来避免更新数据库，最后我使用了一个onfocus（）监听器，该监听器触发一个作为focusout（）的函数listener，这样我就可以获得字段中的输入，并在用户离开字段后更新数据库。
    totalPrice += (price * qty);