मैं एक ऐसा फॉर्म बनाने का प्रयास कर रहा हूं जो किसी को पिज्जा ऑर्डर करने और चालान प्रदर्शित करने की अनुमति देगा क्योंकि उपयोगकर्ता अपना पिज्जा बनाता है।

मैं उन विकल्पों को प्राप्त करने में कामयाब रहा हूं जो उपयोगकर्ता दिखाने के लिए चुनते हैं, लेकिन मैं खो गया हूं कि विकल्पों के लिए मूल्य कैसे निर्दिष्ट किया जाए। आदर्श रूप से, मैं आकारों के लिए एक मूल्य निर्दिष्ट करना पसंद करूंगा और अंत में तीन टॉपिंग (और प्रीमियम टॉपिंग) चुने जाने के बाद एक कीमत। मैं एक ऐसे मुद्दे में भी भाग लेता हूं जहां चालान केवल तभी भरेगा जब फ़ंक्शन sizeOfPizza एकमात्र कार्य है। अन्य जावास्क्रिप्ट जोड़ने से यह अस्वीकार हो जाएगा।

//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>
0
JLP 27 अक्टूबर 2019, 20:20

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>
    
1
mplungjan 27 अक्टूबर 2019, 18:13