Как присвоить числовое значение выделению в форме Javascript

Question

Я пытаюсь создать форму, которая позволит кому-то заказать пиццу и отобразить счет-фактуру, когда пользователь строит свою пиццу.

Мне удалось получить параметры, которые пользователь выбирает для отображения, но я не уверен, как назначить цену опциям. В идеале я хотел бы назначить цену размерам и, в конечном итоге, выбрать цену после трех добавок (и добавок премиум-класса). Я также столкнулся с проблемой, когда счет будет заполнен только в том случае, если функция sizeOfPizza является единственной функцией. Добавление другого 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 = ???? <somehow this would result in the correct if statement becoming the price of the selection> 

  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

  }

}

<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>

Answer 1

Вот несколько лучших практик

Обратите внимание, что в вашем скрипте были орфографические ошибки в личном (нижний регистр), пропущенные </output> и другие проблемы

const prices = {
  "Personal": 5,
  "Medium": 8,
  "Large": 10,
  "Extra Large": 12,
  "Holy Pizza": 20
}

window.addEventListener("load", function() { // when page loads
  document.getElementById("pizza-size").addEventListener("click", function(e) { // pass the event  - in this case the click event
    var tgt = e.target; // what was clicked
    if (tgt.name === "size") { // is it one of the radios?
      var val = tgt.value; // save the value once (DRY principle)
      document.getElementById("pizzaSize").value = val;
      document.getElementById("pizzaSizePrice").value = prices[val]; // look up the price in the prices object
    }
  })
})

<h3> Select Size </h3>
<form id="pizza-size">
  <input type="radio" name="size" value="Personal"> Personal (4 Slices) <br>
  <input type="radio" name="size" value="Medium"> Medium (8 slices)<br>
  <input type="radio" name="size" value="Large"> Large (10 slices) <br>
  <input type="radio" name="size" value="Extra Large"> Extra Large (12 slices)<br>
  <input type="radio" name="size" value="Holy Pizza"> Holy Pizza Batman (24 slices) <br>
</form><hr/>
Pizza Size: <output id="pizzaSize"> </output> <br> 
Pizza Size Price: <output id="pizzaSizePrice"></output>