подсчитайте с помощью JavaScript

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);