Why do I keep getting ReferenceError: * is not defined?
Question
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>
3 answers
solution1
1 ACCPTED 2019-02-18 06:16:38
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;
}
solution2
0 2019-02-18 06:01:55
the calculateOrder function is attempting to return itself:
function calculateOrder() {
[...]
return calculateOrder;
}
solution3
0 2019-02-18 06:05:14
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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why am I getting “ReferenceError: getElementById is not defined”?
Why am I getting “ReferenceError: $cacheFactory is not defined”
Why am I getting a ReferenceError: not defined
Why do I receive an Uncaught ReferenceError: $ is not defined
Why do I get “ReferenceError: test is not defined”
I keep getting an “Uncaught ReferenceError: imgArray is not defined” error
Why do I keep getting the error s is not defined?
Why do I keep getting "JSX is not defined no-undef"
Keep Getting an Error: 'Uncaught ReferenceError: $ is not defined'
Why am I getting “Uncaught ReferenceError: userId is not defined” error?
Related Tags