为什么我不断收到ReferenceError：*未定义？
[英]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. 
Java语言的新手，无论如何尝试，我都无法收到错误消息ReferenceError：calculateOrder未定义为消失。 I've moved my var out and back in tried different statements. 我已经将var移出并返回了不同的语句。 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 个解决方案
解决方案1
1 已采纳 2019-02-18 06:16:38
selectedPasta[i].value will give you "0" or "50" accordingly. selectedPasta [i] .value将相应地为您提供“ 0”或“ 50”。 And they are not present in pastaPrices, hence the return value from getPastaPrice is undefined. 而且它们不存在于pastaPrices中，因此getPastaPrice的返回值是不确定的。 Let me modify your jsBin and share the results. 让我修改您的jsBin并共享结果。
Working JSBin here: https://jsbin.com/qokaboj/edit?html,js,console,output 在这里工作的JSBin： https ://jsbin.com/qokaboj/edit ? html,js,console,output
Here is your working JS code: 这是您的工作JS代码：
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;
}
解决方案2
0 2019-02-18 06:01:55
the calculateOrder function is attempting to return itself: calculateOrder函数正尝试返回自身：
function calculateOrder() {
[...]
return calculateOrder;
}
解决方案3
0 2019-02-18 06:05:14
This might help 这可能有帮助
You created a function called calculateOrder 您创建了一个名为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 . 而不是返回的calculateOreder你应该返回ordCost 。
How will this help? 这将有什么帮助？ Well we can do some checks in your function to see that calculateOrder is...not defined! 好吧，我们可以在您的函数中进行一些检查，以查看calculateOrder是否...未定义！ The calculateOrder that is not defined is that undefined variable I noted up there. 未定义的calculateOrder是我在那里记录的未定义变量。
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
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.