CODEWITHSUNDEEP
javascript
user10516592
user10516592

Reputation:

Why do I keep getting ReferenceError: * is not defined?

New to Javascript and I can't get the error message ReferenceError: calculateOrder is not defined to go away no matter what I try. I've moved my var out and back in tried different statements. Nothing of the knowledge I have so far is working. How can I get rid of this error message? Would appreciate any help or pointers I can get.

var cost = 750;

var pasta_prices = new Array();
pasta_prices["spaghetti"] = 0;
pasta_prices["fettucine"] = 50;
pasta_prices["fusilli"] = 75;

var sauce_prices = new Array();
sauce_prices["pomodoro"] = 0;
sauce_prices["bolognese"] = 50;
sauce_prices["alfredo"] = 100;

function getPastaPrice() {
	var pastaPrice = 0;

	var form = document.forms["myForm"];

	var selectedPasta = myForm.elements["pastatype"];

	for (var i = 0; i < selectedPasta.length; i++) {

		if (selectedPasta[i].checked) {
			pastaPrice = pasta_prices[selectedPasta[i].value];
			break;
		}
	}
	return pastaPrice;
}


function getSaucePrice() {
	var saucePrice = 0;

	var myForm = document.forms["myForm"];

	var selectedSauce = myForm.elements["sauce"];

	saucePrice = sauce_prices[selectedSauce.value];

	return saucePrice;
}

function extrasPrice() {
	var extraPrice = 0;

	var myForm = document.forms["myForm"];

	var includeSalad = myForm.elements["salad"];
	var includeSticks = myForm.elements["sticks"];

	if (includeSalad.checked == true) {
		extraPrice = 200;
	}

	if (includeSticks.checked == true) {

		extraPrice = 100;

	}

	return extraPrice;
}

function calculateOrder() {
	var ordCost = cost + getPastaPrice() + getSaucePrice() + extrasPrice();

	console.log((ordCost / 100).toFixed(2));

	return ordCost;

}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Costello Improved">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Costellos Pasta and Pizza</title>
<script language="JavaScript" type="text/javascript" src="costello.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
  <style>
    .col-md-12{
    text-align: center;
    font-size: 3em;
    background-color: red;
}

.msg{
    text-align:center;
    font-size: 1.3em;
    color: red;
}

.row{
    margin-top: 10px;
    border: 5px solid white;
    background-color: silver;
    padding: 10px;
}

.label{
    text-align:center;
    vertical-align:top;
}

#submitMessage{
    transition: opacity 10s;
}

#cancel{
    text-decoration: underline;
}
  </style>
  
</head>

<body>

<form  name="myForm" action="https://costello-pasta.glitch.me/order" id="myForm" method="POST" onsubmit="return calculateOrder()">
      <div class="container">


        <div class="row">
            <div class="col-md-12" id="debug">Costello's Online Orders</div>
        </div>

        <div class="row">
          <div   class="col-md-4  label">Pasta Bowl</div>
          <div class="col-md-4"  > (basic price: $7.50)</div>
          <div class="col-md-4"  ></div>
        </div>

        <div class="row">
          <div   class="col-md-4  label">Pasta</div>
          <div class="col-md-4" >
            <div><input type="radio" name="pastatype" value="0" id="spaghetti"/>Spaghetti (no extra cost)</div>
            <div><input type="radio" name="pastatype" value="50" id="fettucine"/>Fettucine (add 50 cents)</div>
            <div><input type="radio" name="pastatype" value="75" id="fusilli"/>Fusilli (add 75 cents)</div>
            </div>
          <div  class="col-md-4 msg" id="radioLabel"></div>
        </div>

        <div class="row">
          <div   class="col-md-4  label">Sauce</div>
          <div class="col-md-4" >
            <select name="sauce" >
            <option value="0" id="pomodoro">Pomodoro (no extra cost)</option>
            <option value="50" id="bolognese">Bolognese (add 50 cents)</option>
            <option value="100" id="alfredo">Alfredo (add $1.00)</option>
            </select>
            </div>
          <div class="col-md-4" ></div>
        </div>

        <div class="row">
          <div   class="col-md-4  label">Extras</div>
          <div class="col-md-4" >
             <div><input type="checkbox" name="extras" value="200" id="salad"/>Side salad (add $2.00)</div>
             <div><input type="checkbox" name="extras" value="100" id="sticks"/>Bread sticks (add $1.00)</div>
          </div>
          <div class="col-md-4" ></div>
        </div>

        <div class="row">
          <div   class="col-md-4  label">Name</div>
          <div class="col-md-4" ><input type="text" id="name" name="client_name" /></div>
          <div class="col-md-4 msg"  id="nameLabel"></div>
        </div>

        <div class="row">
          <div   class="col-md-4  label">Phone</div>
          <div class="col-md-4" ><input type="text" id="phone" value="" /></div>
          <div class="col-md-4 msg"  id="phoneLabel"></div>
        </div>

        <div class="row">
          <div   class="col-md-4  label"><input type="submit" value="Order"   /></div>
          <div class="col-md-4"  id="totalcost"></div>
          <div class="col-md-4 msg"  id="submitMessage"></div>
        </div>
    </div>

</form>




</body>
</html>

Upvotes: 0

Views: 728

Answers (3)

Sagar Agrawal
Sagar Agrawal

Reputation: 657

selectedPasta[i].value will give you "0" or "50" accordingly. And they are not present in pastaPrices, hence the return value from getPastaPrice is undefined. Let me modify your jsBin and share the results.

Working JSBin here: https://jsbin.com/qokaboj/edit?html,js,console,output

Here is your working JS code:

enter code here

function getPastaPrice(){
  var pastaPrice=0;

  var form = document.forms["myForm"];

  var selectedPasta = myForm.elements["pastatype"];

  for(var i = 0; i < selectedPasta.length; i++) {
    if(selectedPasta[i].checked) {
        pastaPrice = pasta_prices[selectedPasta[i].id];
        break;
    }
  }
  return pastaPrice;
}


function getSaucePrice() {
var saucePrice=0;
var myForm = document.forms["myForm"];

var selectedSauce = myForm.elements["sauce"];
for(var i=0; i<selectedSauce.length; i++){
    if(selectedSauce[i].selected){
        saucePrice = sauce_prices[selectedSauce[i].id];
        break;
    }
}
   return saucePrice;
}

function extrasPrice() {
   var extraPrice=0;
   var myForm = document.forms["myForm"];
   var includeSalad = myForm.elements["salad"];
   var includeSticks = myForm.elements["sticks"];

    if(includeSalad.checked) {
       extraPrice = 200;
    }

    if (includeSticks.checked) {
     extraPrice += 100;
    }
    return extraPrice;
}

function calculateOrder() {
  var ordCost = cost + getPastaPrice() + getSaucePrice() + extrasPrice();

    console.log((ordCost/100).toFixed(2));
    return calculateOrder;
}

Upvotes: 0

Alex Fallenstedt
Alex Fallenstedt

Reputation: 2093

This might help

You created a function called calculateOrder

function calculateOrder() {
    var ordCost = cost + getPastaPrice() + getSaucePrice() + extrasPrice();

    console.log((ordCost / 100).toFixed(2));

    return calculateOrder; // <--- problem here.

}

Instead of returning calculateOreder you should return ordCost.

How will this help? Well we can do some checks in your function to see that calculateOrder is...not defined! The calculateOrder that is not defined is that undefined variable I noted up there.

Go ahead a try this in your code too to see what is and is not defined in your function

function calculateOrder() {
    var ordCost = cost + getPastaPrice() + getSaucePrice() + extrasPrice();

    console.log((ordCost / 100).toFixed(2));
    console.log('calculateOrder: ', calculateOrder);
    console.log('ordCost', ordCost)
    return ordCost; //<--- the value you might be looking for

}

Upvotes: 0

jspcal
jspcal

Reputation: 51904

the calculateOrder function is attempting to return itself:

function calculateOrder() {
    [...]
    return calculateOrder;
}

Upvotes: 0

Related Questions