Adding up total price of selected items (Javascript)

Question

I ran into a problem. Code is here:

 // JavaScript Document window.totalIt= function() { var input = document.getElementsByName("product"); var total = 0; for (var i = 0; i < input.length; i++) { if (input[i].checked) { total += 1; } } if(total>=3){ document.getElementById("total").value = "$" + (total*29).toFixed(2); } else{ document.getElementById("total").value = "$" + (total*39).toFixed(2); } } window.totalPrisDessert= function() { var input = document.getElementsByName("dessert"); var total = 0; for (var i = 0; i < input.length; i++) { if (input[i].checked) { total += parseFloat(input[i].value); } } document.getElementById("total").value = "$" + total.toFixed(2); }

 <div id="formular"> <div id="formulartekst"> <form> <h2 class="formskrift">Order Hot Food</h2> <p class="kroner">$39 / $29 when 3 or more checked</p> <input name="product" value="39" type="checkbox" id="p1" onclick="totalIt()" /> Monday <br> <input name="product" value="39" type="checkbox" id="p2" onclick="totalIt()" /> Tuesday <br> <input name="product" value="39" type="checkbox" id="p3" onclick="totalIt()" /> Wednesday <br> <input name="product" value="39" type="checkbox" id="p4" onclick="totalIt()" /> Thursday <br> <input name="product" value="39" type="checkbox" id="p5" onclick="totalIt()" /> Friday <h2 class="formskrift">Dessert</h2> <p class="kroner">$20 ALWAYS</p> <input name="dessert" value="20" type="checkbox" id="p6" onclick="totalPrisDessert()"/> Monday<br> <input name="dessert" value="20" type="checkbox" id="p7" onclick="totalPrisDessert()"/> Tuesday<br> <input name="dessert" value="20" type="checkbox" id="p8" onclick="totalPrisDessert()"/> Wednesday<br> <input name="dessert" value="20" type="checkbox" id="p9" onclick="totalPrisDessert()"/> Thursday<br> <input name="dessert" value="20" type="checkbox" id="p10" onclick="totalPrisDessert()"/> Friday<br> <label> <br> Total <input value="$0.00" readonly type="text" id="total" /> </label> <input type="submit" value="Order"> </form> </div> </div>

https://jsfiddle.net/u0y7aoct/2/

When I check the top 5 boxes they add the price in the total box. However if I check any of the below 5 boxes (desserts) the price overwrites. I need the total price showing, but right now they are acting as two different.

Thank you

Answer 1

Try this updated fiddle

Basically, create a common method which does the total of both

window.totalAll = function()
{
  document.getElementById("total").value = (totalIt() + totalPrisDessert()).toFixed(2) ;
}

Answer 2

You dont need to call two different function you can add both values by calling same function and just need to check a condtion whether is it product or dessert.

var grndTotal = 0;
var total1 = 0;
var total2 = 0;

window.totalIt= function(name) {
  if(name == "product"){

  var input = document.getElementsByName("product");
  var total = 0;
      for (var i = 0; i < input.length; i++) {
        if (input[i].checked) {
          total += 1;
        }
      }
  if(total>=3){ total1 =  (total*29).toFixed(2);}
  else{total1 =  (total*39).toFixed(2);}
  }

if(name == "dessert"){

  var input = document.getElementsByName("dessert");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }

  total2 =  total.toFixed(2);
  }
  grndTotal = parseInt(total2) + parseInt(total1);
  document.getElementById("total").value = "$"+grndTotal ;

}

This is the updated function that work correctly.

https://jsfiddle.net/VijayDhanvai/hd103j4a/

Answer 3

It's just because you programmed it like this. You made two different function for every one of the case and these functions act separately. What did you expect? :)

You need more something like this:

window.totalIt = function() {
  var input = document.getElementsByName("product");
  var total = 0;
    var count = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      count += 1;
    }   
  }   
  if(count >= 3){ 
    total = count * 29; 
  } else {
    total = count * 39; 
  }   
  return total;
}   

window.totalPrisDessert = function() {
  var input = document.getElementsByName("dessert");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }   
  }   
  return total;
}   

window.grandTotal = function() {
  var total = totalIt() + totalPrisDessert();
  document.getElementById("total").value = "$" + total.toFixed(2);
}

Of course, use the new function grandTotal() in your html.