trying to make a pizza form for school but something is not working properly

Question

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

Hello and welcome to Stack Overflow. Please add all the relevant code (HTML, CSS, JavaScript) so that we can reproduce your error and provide you with working answers. It's also useful to tell us what exact error you are getting and on what line you are getting it. — Scott Marcus, Dec 23 '19 at 19:32
You aren't setting the global `topflag = false` in the `else` block. Is that an issue? — adiga, Dec 23 '19 at 19:32
im sorry this is my first time im trying to get the whole code in — Jace Jahraus, Dec 23 '19 at 19:49
the funcion checktoppings comes back as null the word checked after pepperoni is underlined — Jace Jahraus, Dec 23 '19 at 20:21

Scott Marcus · Accepted Answer · 2019-12-23T21:32:29.580

First, your code was not formatted very well and your indentation was off, which makes it hard to tell if your blocks of code match up. It may sound like it's not that important, but the best place to start is by writing code that is formatted well.

Next, you really shouldn't rely on the JavaScript rule that says that if you only have one statement in a block, you can omit the braces {} around that block. This may be true, but is not a good habit and can lead to bugs in your code. Always put blocks in curly braces.

</br> is invalid code.

Don't set up events with inline HTML attributes.

Don't use self-terminating XHTML syntax.

Use .querySelector() and .querySelectorAll() to get references to elements on the page and not .getElementsByName().

See additional comments inline below:

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

wow this is more help than i could even ask for thanks a ton i am learning so much — Jace Jahraus, Dec 23 '19 at 22:15
@JaceJahraus You're welcome. Don't forget to mark this as "the" answer by clicking the checkmark at the top left of the answer. — Scott Marcus, Dec 23 '19 at 22:19

trying to make a pizza form for school but something is not working properly

1 Answers1