时间戳

首页 > 解决方案 > 如何为表单Javascript中的选择分配数值

javascript - 如何为表单Javascript中的选择分配数值

问题描述

我正在尝试构建一个表单，允许某人订购比萨饼并在用户制作比萨饼时显示发票。

我已经设法让用户选择显示的选项，但我不知道如何为选项分配价格。理想情况下，我很乐意为尺寸指定价格，并在选择三种浇头（和优质浇头）后最终定价。我还遇到了一个问题，即仅当函数 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>

标签： javascriptformsif-statement

解决方案

这里有一些更好的做法

请注意，您的脚本在 Personal（小写）、缺失</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>

推荐阅读