如何通过一个按钮一次计算多个输入？

Question

我的 JS 正在根据用户输入的商品数量来更新商品总成本。但是我当前的“onclick”要求我传递一个索引位置来计算给定的行。

我希望能够一次更新所有行项目总计（基于用户的输入数量）。我可以在下面现有的 updatePriceByProduct 函数中执行此操作吗（可能使用 for 循环遍历所有行）？我什至不知道从哪里开始。

HTML

<div class="item-info-container">

      <div class="page-header">
          <h1>Iron <br> Merchandising Shop</h1>

      </div>

        <div class="item-row">

            <div class="item-name"> <span> IronBubble-head </span>  </div>
            <div class="item-cost"> 25.00  </div>
            <div class="item-quantity"> QTY

              <input class="input-quantity">


            </div>
            <div class="item-total-price"> 0.00 </div>
            <div class="item-delete">  <button class="delete-button">Delete</button>  </div>

        </div>

        <div class="item-row">

          <div class="item-name">  <span> IronShirt </span>  </div>
          <div class="item-cost">  15.00  </div>
          <div class="item-quantity">

            <span> QTY
                <input class="input-quantity" type="text">
            </span>

          </div>
          <div class="item-total-price"> 0.00 </div>
          <div class="item-delete">  <button class="delete-        button">Delete</button>  </div>


        </div>

    <div class="calculator">
          <button class="calculate-button" onclick="updatePriceByProduct([0])"> Calculate Prices </button>
        </div>


</div>
</div>

Javascript

function getPriceByProduct(index){

    var stringPrice = document.getElementsByClassName("item-cost")[index].innerHTML;   //Currently getting span id, not all elements
    var numberPrice = Number(stringPrice);

    return numberPrice;

}


function createQuantityInput(index){

    var quantity = document.getElementsByClassName("input-quantity")[index].value;      //retrieve quantity of item from form
    return quantity;
}




function updatePriceByProduct(index){

    var updatedPrice =  getPriceByProduct(index) * createQuantityInput(index);
    var itemTotal = document.getElementsByClassName("item-total-price")[index].textContent = updatedPrice;


    return itemTotal;

}

Answer 1

我添加了一个总计更新的总计 div。我还从其中一个项目中删除了跨度，因为它使导航到每个项目的价格不同，这使得很难对两个项目使用相同的功能。

我从按钮中删除了该功能，而是将正在使用的元素与 eventListener 一起用于按钮上的单击事件。

点击按钮时，items 类数组对象会使用 map 进行迭代，这会生成一个新数组，该数组将填充各个产品总数。 calculateTotals 函数接收一个项目行并提取该行的价格和数量，找到产品，将其设置为该项目的总计并返回要放入价格数组中的价格。 然后使用价格数组计算calculateTotal 中的总计。

这种方法可以让您添加越来越多的项目，而不必更改功能，只要您不更改每个项目行的 html 结构。

HTML：

<div class="page-header">
  <h1>Iron <br> Merchandising Shop</h1>

</div>

<div class="item-row">

  <div class="item-name"> <span> IronBubble-head </span>  </div>
  <div class="item-cost"> 25.00  </div>
  <div class="item-quantity"> QTY

    <input class="input-quantity">


  </div>
  <div class="item-total-price"> 0.00 </div>
  <div class="item-delete">  <button class="delete-button">Delete</button>  </div>

</div>

<div class="item-row">

  <div class="item-name">  <span> IronShirt </span>  </div>
  <div class="item-cost">  15.00  </div>
  <div class="item-quantity">
    QTY
    <input class="input-quantity" type="text">

  </div>
  <div class="item-total-price"> 0.00 </div>
  <div class="item-delete">  <button class="delete-        button">Delete</button>  </div>


</div>

<div class="calculator">
  <button class="calculate-button"> Calculate Prices </button>
</div>
<div class="total">
  Grand Total: <span></span>
</div>

Javascript：

//get the buttons and add an event listner for click on the calculate button
var buttons = document.getElementsByTagName("button");
var calculateButton = buttons[2];
//get the total element to add to later
var total = document.querySelector('.total > span');
//items to iterate over
var itemRows = document.querySelectorAll('.item-row');

calculateButton.addEventListener('click', updatePriceByProduct);

function calculateTotals(itemRow) {
  //get the item's price and quantity
  var price = itemRow.children[1].innerHTML;
  var quantity = itemRow.children[2].children[0].value;

  var total = price * quantity;
  //set item's total to its total
  itemRow.children[3].innerHTML = total;
  return total;
}
function calculateTotal(totals) {
  var newTotal = totals.reduce(function(a,b) {return a + b});
  console.log(newTotal, 'new total');
  total.innerHTML = newTotal;

}

function updatePriceByProduct(event){
  event.preventDefault();
  //return an array with the totals from each item-row
  var prices = Array.prototype.map.call(itemRows, calculateTotals);
  //calcualte the total from the array of prices
  calculateTotal(prices);
}