javascript - Add or substract value of mutiple elements to total value

Question

So I have made a function which changes my values in a "cart". Every input field has their one value and this is added or substracted on it's total on change of the input field. It looks like this:

And my code looks like this (yes I am gonna cleanup the html+css later, this is just for testing :-):

 var extraValues = document.querySelectorAll("input[type=number]");
 var extraTotal = 0;
 
 Array.prototype.forEach.call(extraValues, function (extraValue) {
  extraValue.addEventListener('change', function() {
   var getExtraId = extraValue.id; 
   var extraLength = getExtraId.length;
   var currentExtra = getExtraId.charAt(extraLength - 1);
   var catId = "testKassabon" + currentExtra;
   var extraSort = extraValue.parentElement.querySelector('label');
   var extraPrice = extraValue.parentElement.querySelector('.extraPrice').innerText;
   var totalPrice = extraPrice * this.value;
   var showExtra = document.getElementById(catId);
   showExtra.innerHTML = "<div style='display: flex; justify-content: space-between; margin-top: 10px;'><div>" + this.value + "x " + extraSort.innerText + "</div><div style='color: #EC008C; font-weight: 700; font-size: 16px;'>€ " + totalPrice + "</div></div>";
    })
 });

.col-form-label {
 font-weight: 700;
 display: block;
 width: 100%;
 padding-bottom: 5px;
}

<div style="display: flex; justify-content: space-between; max-width: 600px;">
<div>
<div class="item" style="width: 200px; margin-bottom: 20px;">
             <span class="extraPrice" style="display: none;">7.50</span>
            <label class="col-form-label" style="font-weight: 700;">3-gangendiner</label>
            <input type="number" id="extra1" class="form-control" style="max-width: 70px;" value="0" min="0">   
</div>

<div class="item" style="width: 200px; margin-bottom: 20px;">
            <span class="extraPrice" style="display: none;">10</span>
            <label class="col-form-label">Fietshuur</label>
            <input type="number" id="extra2" class="form-control" style="max-width: 70px;" value="0" min="0">   
</div>

<div class="item" style="width: 200px; margin-bottom: 20px;">
            <span class="extraPrice" style="display: none;">2.50</span>
            <label class="col-form-label">Uitgebreid ontbijtbuffet</label>
            <input type="number" id="extra3" class="form-control" style="max-width: 70px;" value="0" min="0">   
</div>
</div>

<div style="max-width: 300px; width: 100%; padding: 20px; background-color: #F7F7F7; border-radius: 4px; margin: 0px;">
 <span style="color: #000; font-weight: 700; font-size: 20px; padding-bottom: 10px; display: block;">Uw totaalprijs</span>
 <div style="display: flex; flex-direction: column; height: 100%; padding-bottom: 40px;">
  <div id="testKassabon1"></div>
  <div id="testKassabon2"></div>
  <div id="testKassabon3" style="flex-grow: 1;"></div>
  <div id="totalPrice"></div>
 </div>
</div>
</div>

Answer 1

Try this Code man thanks :-)

  
  function countProperties(obj) {
    var count = 0;

    for(var prop in obj) {
    console.log(prop,obj)
        if(obj.hasOwnProperty(prop))
          count = count +obj[prop];
    } 

    return count;
}


var total = {}
                         var extraValues = document.querySelectorAll("input[type=number]");
                         var extraTotal = 0;
                         
                         Array.prototype.forEach.call(extraValues, function (extraValue) {
                          extraValue.addEventListener('change', function() {
                           var getExtraId = extraValue.id; 
                           var extraLength = getExtraId.length;
                           var currentExtra = getExtraId.charAt(extraLength - 1);
                           var catId = "testKassabon" + currentExtra;
                           var extraSort = extraValue.parentElement.querySelector('label');
                           var extraPrice = extraValue.parentElement.querySelector('.extraPrice').innerText;
                           var totalPrice = extraPrice * this.value;
                          total[catId] = totalPrice
                

                 // var TotalCost = Object.values(total).reduce((a, b) //=> a + b, 0)
        

   
        var TotalCost = countProperties(total)
                          console.log(TotalCost)
                         alert(TotalCost)



                           var showExtra = document.getElementById(catId);
                           showExtra.innerHTML = "<div style='display: flex; justify-content: space-between; margin-top: 10px;'><div>" + this.value + "x " + extraSort.innerText + "</div><div style='color: #EC008C; font-weight: 700; font-size: 16px;'>€ " + totalPrice + "</div></div>";
                            })
                
                
                
                         });

        .col-form-label {
                         font-weight: 700;
                         display: block;
                         width: 100%;
                         padding-bottom: 5px;
                        }

                
                        <div style="display: flex; justify-content: space-between; max-width: 600px;">
                        <div>
                        <div class="item" style="width: 200px; margin-bottom: 20px;">
                                     <span class="extraPrice" style="display: none;">7.50</span>
                                    <label class="col-form-label" style="font-weight: 700;">3-gangendiner</label>
                                    <input type="number" id="extra1" class="form-control" style="max-width: 70px;" value="0" min="0">   
                        </div>
                
                        <div class="item" style="width: 200px; margin-bottom: 20px;">
                                    <span class="extraPrice" style="display: none;">10</span>
                                    <label class="col-form-label">Fietshuur</label>
                                    <input type="number" id="extra2" class="form-control" style="max-width: 70px;" value="0" min="0">   
                        </div>
                
                        <div class="item" style="width: 200px; margin-bottom: 20px;">
                                    <span class="extraPrice" style="display: none;">2.50</span>
                                    <label class="col-form-label">Uitgebreid ontbijtbuffet</label>
                                    <input type="number" id="extra3" class="form-control" style="max-width: 70px;" value="0" min="0">   
                        </div>
                        </div>
                
                        <div style="max-width: 300px; width: 100%; padding: 20px; background-color: #F7F7F7; border-radius: 4px; margin: 0px;">
                         <span style="color: #000; font-weight: 700; font-size: 20px; padding-bottom: 10px; display: block;">Uw totaalprijs</span>
                         <div style="display: flex; flex-direction: column; height: 100%; padding-bottom: 40px;">
                          <div id="testKassabon1"></div>
                          <div id="testKassabon2"></div>
                          <div id="testKassabon3" style="flex-grow: 1;"></div>
                          <div id="totalPrice"></div>
                         </div>
                        </div>
                        </div>