計算總使用javascript

我使用一些輸入字段，用戶可以鍵入一個數字和所述價格將根據號碼自動更新被放置在由從HTML代碼計算總使用javascript

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在所有我有很多的麻煩完成這一點。

任何幫助大大appeciated。

來源

2014-01-22 Déjà vu

它的比薩*瑪格麗特*，而不是「magarita」 ... – MaxArt

哈哈我知道，我就注意到當我將它放在這裏xD –

給所有跨度的類提供總數，並且在此函數內onNumPizzaMagaritaInputChange遍歷每個類並將所有這些跨度的值相加，並將最終總和放置在中。我希望你有個想法。 – Lab

您可以使用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);

來源

2014-01-22 14:53:34 Asenar

計算總使用javascript

回答

相關問題