javascript - 如何一键同时计算多个输入？

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，该 div 随总计更新。我还从其中一个项目中删除了跨度，因为它使得导航到每个项目的价格都不同，这使得很难对这两个项目使用相同的功能。

我从按钮中删除了该函数，而是将与按钮上的单击事件的事件监听器一起使用的元素分组。

单击按钮时，将使用 map 迭代类似 items 数组的对象，生成一个新数组，该数组将填充各个产品总计。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);
}