Question

我在HTML中使用一些输入字段创建了一个用户可以输入数字的价格，价格会根据输入的数字自动更新：

<td>Pizza Margherita</td>
<td><input type="number" id="countMargherita" class="orderform" name="PizzaMargherita" onkeyup="validateForm(this)" min="1"></td>
<td><span id="totalMargherita"></span></td>

这段JS代码

var priceMagarita = 7;
    var numPizzaMargheritaInput = document.getElementById('countMargherita');
    var priceMargheritaLabel    = document.getElementById('totalMargherita');

    function onNumPizzaMargheritaInputChange(e){

        var totalMargherita = priceMargherita * parseInt(e.target.value);
        var formattedPrice = '\u20ac '+totalMargherita.toFixed(2);

        priceMMargheritaLabel.innerHTML = '';
        priceMargheritaLabel.appendChild(document.createTextNode(formattedPrice));
    }
    numPizzaMargheritaInput.addEventListener('change', onNumPizzaMargheritaInputChange, false);

现在我有11个领域，就像那些都工作得很好，但现在我想做一个总价。因此，将所有这些价格统计在一起并将它们放入

中

<td><h3>Totale Prijs</h3></td>
<td></td>
<td><span id="TotalPrice"></span></td>

但是因为我在JS中根本没有经验，所以我很难完成这个。

任何帮助都是非常明确的。

Answer 1

您可以使用getElementsByClassName()代替getElementById()来处理每个元素。

也许以下内容并不完全符合您的需要，但您可能很容易适应它

// create a price object with all pizzas prices
var prices = {
  PizzaMargherita : 7,
  PizzaHawai : 42
}
// get all inputs which contains number of pizzas. 
// Maybe you will add something else than "order form"
function recalculate()
{
  var all_inputs = document.getElementsByClassName('orderform');
  var total = 0;
  for(i=0;i<all_inputs.length;i++)
  {
    var that_input = all_inputs[i]
    var subtotal = parseInt(that_input.value * prices[that_input.name]);
    total += subtotal
    document.getElementById('totalMargherita').innerHTML = subtotal;
  }
  document.getElementById('totalPrice').innerHTML = total;
}
// add your listener in each inputs
var all_inputs = document.getElementsByClassName('orderform');
for(i=0;i<all_inputs.length;i++)
  all_inputs[i].addEventListener('change',function(e){recalculate(); }, false);

使用javascript计算总计

1 个答案: