Question

Javascript的新手，我无法收到错误消息ReferenceError：无论我如何尝试，都未定义calculateOrder消失。我已经将var移出，并尝试了不同的语句。到目前为止，我所掌握的知识没有任何作用。如何摆脱该错误消息？希望能得到我的任何帮助或指示。

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>

Answer 1

selectedPasta [i] .value将相应地为您提供“ 0”或“ 50”。而且它们不存在于pastaPrices中，因此getPastaPrice的返回值是不确定的。让我修改您的jsBin并共享结果。

在这里工作的JSBin：https://jsbin.com/qokaboj/edit?html,js,console,output

这是您的工作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;
}

Answer 2

calculateOrder函数正在尝试返回自身：

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

Answer 3

这可能有帮助

您创建了一个名为calculateOrder

的函数

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

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

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

}

您应该返回calculateOreder而不是返回ordCost。

这将如何帮助？好吧，我们可以在您的函数中进行一些检查，以查看calculateOrder是否...未定义！未定义的calculateOrder是我在那里记下的未定义变量。

也可以在代码中尝试此操作，以查看函数中定义的内容和未定义的内容

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

}

为什么我不断收到ReferenceError：*未定义？

3 个答案: