dimanche 27 octobre 2019

How to assign numerical value to a selection in a form Javascript

I'm attempting to build a form that will allow someone to order a pizza and display the invoice as the user builds their pizza.

I've managed to get the options the user selects to show up, but I'm lost as to how to assign a price to the options. Ideally, I'd love to assign a price to the sizes and eventually a price after three toppings are selected (and premium toppings). I'm brand new to Javascripting so I'd appreciate any help!

HTML

        <h3> Select Size </h3> 

            <form id="pizza-size">
        <input type="radio" name="size"  onclick="sizeOfPizza(this.value)" onclick="determineSizePrice()" value="Personal"> Personal (4 Slices) <br>
        <input type="radio" name="size"  onclick="sizeOfPizza(this.value)" onclick="determineSizePrice()" value="Medium"> Medium (8 slices)<br>
        <input type="radio" name="size"  onclick="sizeOfPizza(this.value)" onclick="determineSizePrice()" value="Large"> Large (10 slices) <br> 
        <input type="radio" name="size"  onclick="sizeOfPizza(this.value)" onclick="determineSizePrice()" value="Extra Large"> Extra Large (12 slices)<br>
        <input type="radio" name="size"  onclick="sizeOfPizza(this.value)" onclick="determineSizePrice()" 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> 

Javascript

//display choice of size of pizza
function sizeOfPizza(size) {
  document.getElementById("pizzaSize").value = size;
}

//display choice of size price 
function determineSizePrice(size) {
    document.getElementById("pizzaSizePrice").value = var sizePrice

if (option.value == "personal") {
    var pizzaSizePrice=5

}
else if (option.value == "Medium") {
    var pizzaSizePrice=8

}
else if (option.value =="Large") {
    var pizzaSizePrice=10

}

else if (option.value =="Extra Large") {
    var pizzaSizePrice=12

}else if (option.value =="Holy Pizza") {
    var pizzaSizePrice=20

}

}

I also run into an issue where the invoice will only fill out if the function sizeOfPizza is the only function. Adding other Javascript will negate this.

Thank you so much for any help you can offer!

Aucun commentaire:

Enregistrer un commentaire