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