I am in the process of creating a form that allows users to customize and order pizza while showing them the invoice as they make their selections.
Currently, I have successfully implemented the display of user-selected options, but I am struggling with adding prices to these choices. My goal is to set prices for different sizes and toppings (both regular and premium) as the user selects them. Additionally, I encounter an issue where the invoice is only generated if the sizeOfPizza function is present on its own, and adding other JavaScript functions causes it to malfunction.
//function to show selected pizza size
function sizeOfPizza(size) {
document.getElementById("pizzaSize").value = size;
}
//function to determine price based on size selection
function determineSizePrice(size) {
if (size == "Personal") {
var pizzaSizePrice = 5;
} else if (size == "Medium") {
var pizzaSizePrice = 8;
} else if (size == "Large") {
var pizzaSizePrice = 10;
} else if (size == "Extra Large") {
var pizzaSizePrice = 12;
} else if (size == "Holy Pizza") {
var pizzaSizePrice = 20;
}
document.getElementById("pizzaSizePrice").value = pizzaSizePrice;
}<h3> Select Size </h3>
<form id="pizza-size">
<input type="radio" name="size" onclick="sizeOfPizza(this.value)" value="Personal"> Personal (4 Slices) <br>
<input type="radio" name="size" onclick="sizeOfPizza(this.value)" value="Medium"> Medium (8 slices)<br>
<input type="radio" name="size" onclick="sizeOfPizza(this.value)" value="Large"> Large (10 slices) <br>
<input type="radio" name="size" onclick="sizeOfPizza(this.value)" value="Extra Large"> Extra Large (12 slices)<br>
<input type="radio" name="size" onclick="sizeOfPizza(this.value)" value="Holy Pizza"> Holy Pizza Batman (24 slices) <br>
</form>
<br>
<br> Pizza Size: <output id="pizzaSize"> </output> <br> Pizza Size Price: <output id="pizzaSizePrice">
<br>