Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Abe Layee
Abe Layee
8,378 Points
Posted by Abe Layee
Abe Layee
8,378 Points

Js is not outputting any data

I have this basic order form and for some reason js code is not printing anything on the screen. I thought it was my fault for not calling the function, but I did and still nothing is printing on the screen. I have not code in Js for a while. I'm getting the error message can't not read the value of undefine "quantity".

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Delicious Cakes | The world Best Cake</title>
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700,700i" rel="stylesheet">
</head>
<body>
  <div id="total">Total: </div>
<form  name="orderForm">
     <fieldset>
     <legend>Place Your Cake Order</legend>
         <label for="firstName">Firstname:</label>
         <input type="text" id="firstName" size="50" required="required" name="firstname">
         <label for="lastName">Lastname:</label>
         <input type="text" id="lastName" size="50" required="required" name="lastname">
         <label for="email">Email:</label>
         <input type="email" id="email" size="50" required="required" name="email">
         <label for="telephone">Telephone:</label>
         <input type="tel" id="telephone" size="50" name="telephone">
         <label for="address">Address:</label>
         <input type="text" id="address" size="50" required="required" name="address">
         <label for="date">Date</label>
         <input type="date" id="date">
         <br>
         <label>Choose Cake From Below:</label>
         <div class="center">
         <select name="cakeTypes" class="cakeOption">
             <option >-- Select Cake --</option>
             <option value="chocolate">Chocolate Cake</option>
             <option value="cheesecake">Cheesecake</option>
             <option value="velvetCake">Red velvet Cake</option>
             <option value="butterCake">Butter Cake</option>
         </select>
          </div>

         <br>
         <label>Select the cake size:</label>
         <div class="center">
             <select name="cakeSize" class="cakeOption">
                 <option >-- Select Cake Size --</option>
                 <option value="small">Small</option>
                 <option value="Medium">Medium</option>
                 <option value="large">Large</option>
             </select>
         </div>
         <br>

         <label>Quantity:</label>
         <input type="number" namae="quantity" min="1" max="10000">
         <br>
         <input type="submit" value="Place Order" class="order" onsubmit="caculateOrder()">
     </fieldset>
</form>

<script src="js/order.js"></script>
</body>
</html>

css

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin:0;
    padding:0;
    font-family: 'Josefin Sans', sans-serif;
}


label {
    display: inline-block;
    font-size:1.4em;
    width: 300px;
    text-align: right;
    margin:5px;
    padding:10px;

}

input {
    -webkit-border-radius:1.5px;
    -moz-border-radius:1.5px;
    border-radius:1.5px;
    padding:5px;
}
input:focus {
    -webkit-transition: all 0.3s ease-in-out ;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    outline-color: crimson;
}



fieldset {
    width: 50%;
    margin:15% auto;
    padding:15px;
}

legend {
    text-align: center;
    font-size:2em;

}


.center {
    text-align: center;
}


.cakeOption option {
    font-size:1.5em;

}

.order {
    background:#e74c3c;
    color:#fff;
    padding:13px;
    cursor: pointer;
    width: 250px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    font-size:1.1em;
    float:right;
    clear:right;
    margin-top:15px;
}

.order:hover {
    background-color:#fff;
    color:#e74c3c;
    outline-color:#e74c3c;
}

function  caculateOrder () {
    var firstname,
        lastname,
        email,
        telephone,
        address,
        small = 5.00,
        medium = 10.00,
        large = 20.00,
        quantity,
        cakeTypes,
        cakeSize,
        total =  document.getElementById("total");


   var orderForm = document.forms.orderForm;
      firstname = orderForm.firstname.value;
      lastname = orderForm.lastname.value;
     email = orderForm.email.value;
     telephone = orderForm.telephone.value;
     address = orderForm.address.value;
     cakeTypes = orderForm.cakeTypes.value;
    cakeSize = orderForm.cakeSize.value;
    quantity = orderForm.quantity.value;



       if(cakeSize === "small") {
           total = quantity * small;
           document.write("The total order is:" + total);
       }  else if (cakeSize === "Medium") {
              total = quantity * medium;
              document.write("The total price is:" + total);
       }    else {
              total = quantity * large;
              document.write (" The total order is:" + total);
       }


}
caculateOrder();