vendredi 15 novembre 2019

How to sum the totals of two different functions into a new function?

I posted this question earlier but left a lot of information out regarding my HTML code so I will update it here.

Right now I have two different functions that calculate the total costs of two different sections on the menu, the Appetizers & Main Dishes. Now what I am trying to do is create a third function that will give me a grand total of both the Appetizers & Main Dishes costs.

I want to trigger this calculation using a submit button and then have the value be displayed through an input text.

Here is what I have tried:

var percentage = 1.25;
function AppSubTotal() {
  var guestsQTY = +document.getElementById('guests').value || 0,
      input = document.getElementsByName("app"),
      appItemTotal = 0;
  var appsubtotal = 0;

  for (var i = 0; i < input.length; i++) {
      if (input[i].checked) appItemTotal += +input[i].value;
  }
  document.getElementById("appsubtotal").value = "$" + (appItemTotal * guestsQTY * percentage).toFixed(2);

  appsubtotal.innerText = appsubtotal;
  GrandTotal();
}

function MainDishSubTotal() {
  var guestsQTY = +document.getElementById('guests').value || 0,
      input = document.getElementsByName("maindish"),
      maindishItemTotal = 0;
  var maindishtotal = 0;

  for (var i = 0; i < input.length; i++) {
      if (input[i].checked) maindishItemTotal += +input[i].value;
  }
  document.getElementById("maindishtotal").value = "$" + (maindishItemTotal * guestsQTY * percentage).toFixed(2);

  maindishtotal.innerText = maindishtotal;
  GrandTotal();
}

function GrandTotal() {
  var totalApp = appsubtotal.innerText || 0;
  var totalMain = maindishtotal.innerText || 0;

document.getElementById('grandtotal').innerText = Number(totalApp) + Number(totalMain);

}

  document.addEventListener( 'onclick', function() {
  AppSubTotal();
  MainDishSubTotal();

});

var grandTotalButton = document.getElementById("gtButton");
if (grandTotalButton.addEventListener) {
grandTotalButton.addEventListener("click", GrandTotal, false);
} else if (grandTotalButton.attachEvent) {
grandTotalButton.attachEvent("onclick", GrandTotal);
}
<p> Estimate number of guests: <input type="number" id="guests" min="25" </p>

<h1>Appetizers Selection - $3 per person </h1>
<p style="font-size:15px;"> *each selection of an appetizer is $3 per estimate number of guests</p>

    <label><input type="checkbox" name="app" value="3" onclick="AppSubTotal()"/> Meat Pie - Flaky pastry filled with minced beef, onions and green peppers</label>
<br><br>
    <label><input type="checkbox" name="app" value="3" onclick="AppSubTotal()"/> Chin Chin - Fried pastry chips</label>
<br><br>
    <label><input type="checkbox" name="app" value="3" onclick="AppSubTotal()"/> Spring Rolls -  Fried flour wrappings with tender-crisp vegetables filling</label>
<br><br>
<label><input type="checkbox" name="app" value="3" onclick="AppSubTotal()"/> Deviled Eggs - Stuffed eggs with yolk paste & mayo topped with paprika</label>
<br><br>
    <label><input type="checkbox" name="app" value="3" onclick="AppSubTotal()"/> Kelewele -  Fried plantains seasoned with spices</label>
<br><br>
<label><input type="checkbox" name="app" value="3" onclick="AppSubTotal()"/> Kebab - Spicy meat skewers; choose your meat! (one meat per skewer)</label>
<br><br>
     <label>
       <h1>
       Total Appetizers Costs:
        <input value="$0.00" readonly="readonly" type="text" id="appsubtotal"/>
       </h1>
      </label>   
 </fieldset>

 <!--main dish selection-->
  <fieldset>
      <h1>
       One Pot Rice Selection - $9 per person 
      </h1>

<input type="checkbox" name="maindish" value="9" onclick="MainDishSubTotal()"/> Jollof - Rice made with tomatoes, onions, peas & carrots
<br><br>
<input type="checkbox" name="maindish" value="9" onclick="MainDishSubTotal()"/> Waayke - Rice made with black eyed peas
<br><br>
<input type="checkbox" name="maindish" value="9" onclick="MainDishSubTotal()"/> Pumpkin Rice Risotto - Creamy rice made with pumpkin puree 

       <h1>
        Meat Selection 
      </h1>

<input type="checkbox" name="maindish" value="5" onclick="MainDishSubTotal()"/> Fried Turkey Legs - $5 per person 
<br><br>
<input type="checkbox" name="maindish" value="6" onclick="MainDishSubTotal()"/> Baked Chicken Legs - $6 per person 
<br><br>
<input type="checkbox" name="maindish" value="7" onclick="MainDishSubTotal()"/> Oven Grilled Tilapia - $7 per person 

             <h1>
        Fufu & Soup Selection - $10 per person
      </h1>

<input type="checkbox" name="maindish" value="10" onclick="MainDishSubTotal()"/> Fufu & Light Soup with Tilapia 
<br><br>
<input type="checkbox" name="maindish" value="10" onclick="MainDishSubTotal()"/> Fufu & Vegan Peanut Soup 
<br><br>
<input type="checkbox" name="maindish" value="10" onclick="MainDishSubTotal()"/> Fufu & Goat Palm Nut Soup 

      <h1>
       Stew Selection - $10 per person 
      </h1>

  <input type="checkbox" name="maindish" value="10" onclick="MainDishSubTotal()"/> Kontomire Stew - Prepared with various spinach leaves & various seasonings 
<br><br>
<input type="checkbox" name="maindish" value="10" onclick="MainDishSubTotal()"/> Tomato Stew - Prepared with various tomatoes & various seasonings 
<br><br> 
<input type="checkbox" name="maindish" value="10" onclick="MainDishSubTotal()"/> Okra Stew - Prepared with okra & seafood 

     <h1>
       Starch Selection - $6 per person 
      </h1>

  <input type="checkbox" name="maindish" value="6" onclick="MainDishSubTotal()"/> White Rice - Boiled white rice lightly seasoned with salt 
<br><br>
<input type="checkbox" name="maindish" value="6" onclick="MainDishSubTotal()"/> Ampesi - Boiled yam, plantain, cocoyam, & cassava 
<br><br> 
<input type="checkbox" name="maindish" value="6" onclick="MainDishSubTotal()"/> Banku - Fermented corn & cassava dough 
<br><br>   
<input type="checkbox" name="maindish" value="6" onclick="MainDishSubTotal()"/> Kenkey - Fermented ground white corn 
<br><br>
     <label>
       <h1>
       Total Main Dish Costs:
        <input value="$0.00" readonly="readonly" type="text" id="maindishtotal"/>
       </h1>
      </label>  
  </fieldset>

<fieldset>
     <label>
       <h1>
       <input type="button" id="gtButton" onclick="GrandTotal()" value="Calculate Grand Total" />
       <br><br>
         Your Grand Total is:
        <input value="$0.00" readonly="readonly" type="text" id="grandtotal"/>
       </h1>
      </label> 
  </fieldset>





Aucun commentaire:

Enregistrer un commentaire