<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>pizza</title>
</head>
<body>
  <script>
    var sizeflag = false, topflag = false, crustflag = false,paymentflag = false;
    function check(){
      checkSize()
      checkToppings()
      checkCrust()
      checkPayment()

      if (sizeflag && topflag && crustflag && paymentflag)
        alert("Your pizza is on the way see you soon",
        "you got a " +sizeflag+"pizza with"+topflag+crustflag+"and you want to pay"+paymentflag);
    } 

    function checkSize(){	
      var spot = document.getElementsByName("size");
      ((spot[0].checked)||(spot[1].checked)||(spot[2].checked)||(spot[3].checked))
      sizeflag = true;
      else alert("You haven't chosen your pizza size");	
      console.log(sizeflag);
    }

    function checkToppings(){	
      if ((document.getElementById("pepporoni").checked)||
        (document.getElementById("mushroom").checked)||
        (document.getElementById("onions").checked)||
        (document.getElementById("sausage").checked)||
        (document.getElementById("bacon").checked)||
        (document.getElementById("extra cheese").checked)||
        (document.getElementById("black olives").checked)||
        (document.getElementById("green peppers").checked))
        topflag = true;
      else alert("You haven't chosen any toppings");							
        console.log(topflag); 			
    }

    function checkCrust(){	
      var spot = document.getElementsByName("crust");
      if ((spot[0].checked)||(spot[1].checked)||(spot[3].checked))
        crustflag = true;
      else alert("You haven't chosen your crust");	
        console.log(crustflag);
    }

    function checkPayment(){	
      var spot = document.getElementsByName("payment");
      if ((spot[0].checked)||(spot[1].checked)||(spot[2].checked))
        paymentflag = true;
      else alert("You haven't chosen your payment size");	
        console.log(paymentflag); 
    }
  </script>

  <form>
    Size: <br/>
    <input type ="radio" name ="size" id ="small"/>small</br>
    <input type ="radio" name ="size" id="medium"/> medium</br>
    <input type ="radio" name ="size" id = "large"/> large</br>
    <input type ="radio" name ="size" id = "extralarge"/> extra large</br>
    </br>
    </br>
    </br>
    toppings: <br/>
    <input type ="checkbox" id ="pepporoni"/>pepperoni</br>
    <input type ="checkbox" id ="mushrooms"/> Mushrooms</br>
    <input type ="checkbox" id ="onions"/> Onions</br>
    <input type ="checkbox" id ="sausage"/> Sausage</br>
    <input type ="checkbox" id ="bacon"/>Bacon</br>
    <input type ="checkbox" id ="extra cheese"/> Extra cheese</br>
    <input type ="checkbox" id = "black olives"/> Black olives</br>
    <input type ="checkbox" id = "green peppers"/> green peppers</br>
    </br>
    </br>
    </br>
    Type of Crust: <br/>
    <input type ="radio" name=crust id ="thin"/>thin</br>
    <input type ="radio" name=crust id="thick"/> thick</br>
    <input type ="radio" name=crust id = "stuffed"/> stuffed</br>
    </br>
    </br>
    </br>
    Method payment: <br/>
    <input type ="radio" name=payment id ="Debatdoor"/>debit at the door</br>
    <input type ="radio" name=payment id="credatdoor"/> credit at the door</br>
    <input type ="radio" name=payment id = "cashatdoor"/> cash at the door</br>
    <input type = "button" onclick="check()" value ="Submit"/>
  </form>
</body>
</html>
-1
Jace Jahraus 23 पद 2019, 22:25

1 उत्तर

सबसे बढ़िया उत्तर

सबसे पहले, आपका कोड बहुत अच्छी तरह से स्वरूपित नहीं था और आपका इंडेंटेशन बंद था, जिससे यह बताना मुश्किल हो जाता है कि आपके कोड के ब्लॉक मेल खाते हैं या नहीं। ऐसा लग सकता है कि यह इतना महत्वपूर्ण नहीं है, लेकिन शुरू करने के लिए सबसे अच्छी जगह कोड लिखना है जो अच्छी तरह से स्वरूपित है।

इसके बाद, आपको वास्तव में जावास्क्रिप्ट नियम पर भरोसा नहीं करना चाहिए जो कहता है कि यदि आपके पास किसी ब्लॉक में केवल एक कथन है, तो आप उस ब्लॉक के आस-पास के ब्रेसिज़ {} को छोड़ सकते हैं। यह सच हो सकता है, लेकिन यह एक अच्छी आदत नहीं है और इससे आपके कोड में बग हो सकते हैं। हमेशा घुंघराले ब्रेसिज़ में ब्लॉक लगाएं।

</br> अमान्य कोड है।

इनलाइन HTML विशेषताओं वाले ईवेंट सेट अप न करें।

स्व-समाप्ति XHTML सिंटैक्स का उपयोग न करें।

.querySelector() और .querySelectorAll() और नहीं .getElementsByName().

नीचे अतिरिक्त टिप्पणियाँ इनलाइन देखें:

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>pizza</title>
  <style>
    fieldset { margin-bottom: 1em; }
  
    /* Make any <label> elements within a <fieldset> show on its own line */
    fieldset label { display:block; }
  </style>
</head>
<body>
  <form>
    <!-- Don't use <br> tags every time you want to move to the next line.
         They are meant to simply indicate a continuation of the same content
         but on a new line. For creating rows of information, wrap the content
         in <div> elements or condiser using CSS (as shown here). Also, consider
         using <fieldset> for sections within forms as this makes navigation for
         people with screen readers easier. -->
    <fieldset>
      <legend>Size:</legend>
      <!-- Place your form fields into <label> elements for better use.
           Now, clicking on the radio button or the text within the label will
           activate the radio button. 
           
           Also, while it seems easy to just give an element an ID, it actually
           makes your ability to keep your code working more difficult when you
           decide to add or remove elements. There are many other ways of getting
           a reference to an HTML element from JavaScript besides Ids, so generally,
           don't use IDs. See the JavaScript below for how to access individual items. 
           
           However, radio buttons and checkboxes must have their "value" attribute
           set because without doing that, checking it won't mean anything. -->
      <label><input type="radio" name="size" value="small"> small</label>
      <label><input type="radio" name="size" value="medium"> medium</label>
      <label><input type="radio" name="size" value="large"> large</label>
      <label><input type="radio" name="size" value="extralarge"> extra large</label>
    </fieldset>

    <fieldset>
      <legend>Toppings:</legend>
      <!-- Checkboxes can have a "name" attribute too and it makes working with them easy. -->
      <label><input type ="checkbox" name="topping" value="pepporoni"> Pepperoni</label>
      <label><input type ="checkbox" name="topping" value="mushrooms"> Mushrooms</label>
      <label><input type ="checkbox" name="topping" value="onions"> Onions</label>
      <label><input type ="checkbox" name="topping" value="sausage"> Sausage</label>
      <label><input type ="checkbox" name="topping" value="bacon"> Bacon</label>
      <label><input type ="checkbox" name="topping" value="extra cheese"> Extra cheese</label>
      <label><input type ="checkbox" name="topping" value="black olives"> Black olives</label>
      <label><input type ="checkbox" name="topping" value="green peppers"> green peppers</label>
    </fieldset>

    <fieldset>
      <legend>Crust:</legend>
      <label><input type ="radio" name="crust" value="thin"> thin</label>
      <label><input type ="radio" name="crust" value="thick"> thick</label>
      <label><input type ="radio" name="crust" value= "stuffed"> stuffed</label>
    </fieldset>

    <fieldset>
      <legend>Method payment:</legend>
      <label><input type ="radio" name="payment" value="debit"> debit at the door</label>
      <label><input type ="radio" name="payment" value="credit"> credit at the door</label>
      <label><input type ="radio" name="payment" value="cash"> cash at the door</label>
    </fieldset>
    
    <!-- DO NOT USE INLINE JAVASCRIPT EVENT ATTRIBUTES!
         This is a 25+ year old technique that should not be used in 2019.
         Separate your JavaScript from your HTML and set up your events separately. 
         Also, if you really will be submitting the form data to another URL, you
         should be using type="submit", not type="button". -->
    <input type="button" value ="Submit">
  </form>
  
  <!-- Place your <script> at the end of the <body> so that by the time the HTML
       parser gets here, all the HTML will have been read into memory. -->
  <script>
    var sizeflag = false, topflag = false, crustflag = false, paymentflag = false;
    
    // Get references to the DOM elements you'll be using just once, not every time
    // a function runs.
    var btnSubmit = document.querySelector("input[type='button']");
    
    // Set up your event handling in JavaScript, not HTML.
    btnSubmit.addEventListener("click", check);
    
    function check(){
      // Each function has been changed to possibly return a string, so
      // an array is used to store any return values.
      var messages = [];
      
      // The .push() method adds the argument to the array
      messages.push(checkSize());  // Always end your statements with a semicolon.
      messages.push(checkToppings());
      messages.push(checkCrust());
      messages.push(checkPayment());

      if (sizeflag && topflag && crustflag && paymentflag){
        // Get the values of the selected choices
        var size = document.querySelector("input[name='size']:checked").value;
        // Convert the collection of results into an array:
        var toppingFields = Array.prototype.slice.call(document.querySelectorAll("input[name='topping']:checked"));
        
        // Because you can order more than one topping, we need to get all of the values
        // from the checked checkboxes and we do that by looping over the array and returning
        // the values of the items into another array (toppings here).
        var toppings = toppingFields.map(function(item){
          return item.value;
        });
        
        // Convert the array items into a string separated with commas and spaces
        toppings = toppings.join(", ");
        
        var crust = document.querySelector("input[name='crust']:checked").value;
        var payment = document.querySelector("input[name='payment']:checked").value;
      
        // The alert method only takes one argument. Anything after the comma
        // outside of the quotes will be ignored. If you have a large string,
        // make sure to concatenate properly and use the values of the selected items:
        alert("Your pizza is on the way see you soon.\nYou ordered a " + size + " pizza with " + toppings + " and " + crust + " crust  and you want to pay by " + payment + " at the door.");
      } else {
        // Make all the array elements into a string, separated by commas and a space
        var message = messages.join(", ");
        alert("You haven't selected: " + message);
      }
    } 

    function checkSize(){	
      // You don't need to check each radio button in a group to see if one of them
      // got checked. You can do the same thing like this:
      if(document.querySelector("input[name='size']:checked")){
        sizeflag = true;
      } else { 
        sizeflag = false; // You need to reset this in both cases
        
        // Instead of each function showing a separate alert, have
        // each function just return a message that can be concatenated
        // into a single alert.
        return "size";
      }
    }

    function checkToppings(){	
      if(document.querySelector("input[name='topping']:checked")){
        topflag = true;
      } else { 
        topflag = false;
        return "toppings";	
      }			
    }

    function checkCrust(){	
      if (document.querySelector("input[name='crust']:checked")){
        crustflag = true;
      } else {
        crustflag = false;
        return "crust";	
      }
    }

    function checkPayment(){	
      if (document.querySelector("input[name='payment']:checked")){
        paymentflag = true;
      } else { 
        paymentflag = false;
        return "payment type";
      }
    }
  </script>
  
</body>
</html>
1
Scott Marcus 23 पद 2019, 21:32