我正在使用表单并使用函数创建返回值，然后将其用于表单末尾的总计算。
有两个函数正在返回undefined，我无法弄清楚原因。我相信我正在正确访问表单元素。我已使用控制台日志检查了数组键并获取了有效数字。
任何帮助都会很棒。我包括HTML＆amp;外部脚本。
HTML
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Square Foot Form</title>
<script type="text/javascript" src="sqfoot_script.js"></script>
<link href="sqfoot_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<form action="" id="sqfoot" onsubmit="return false;">
<div>
<div class="cont_order">
<fieldset>
<legend>Calculate Your Rental Rate</legend>
<label> How many plants do you want to grow ? </label>
<select size="1" <select id="plantNumber" name="plantNumber" onchange="getNumberOfPlants();">
<option value="None">Select number of plants</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4"> 4</option>
<option value="5"> 5</option>
<option value="6"> 6</option>
<option value="7"> 7</option>
<option value="8"> 8</option>
<option value="9"> 9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
<br><br/>
<label> What size plants are you starting with ? </label>
<label class='radiolabel'><input type="radio" name="plantType" value="16" onclick="getSquareInches(); calculateSquareFeet();" />Seeds, havn't started yet</label><br/>
<label class='radiolabel'><input type="radio" name="plantType" value="16" onclick="getSquareInches(); calculateSquareFeet();" /> Seedlings, less than 2ft high</label><br/>
<label class='radiolabel'><input type="radio" name="plantType" value="64" onclick="getSquareInches(); calculateSquareFeet();" /> Juvenile, 2 - 4ft high</label><br/>
<label class='radiolabel'><input type="radio" name="plantType" value="144" onclick="getSquareInches(); calculateSquareFeet();" /> Adult, 4ft or higher</label><br/>
<br/>
<label > Grow Type </label>
<select id="Grow_Type" name='Grow_Type' onchange="getGrowType();">
<option value="None">Select Grow Type</option>
<option value="15">Traditional soil based</option>
<option value="21">Hydroponic</option>
<option value="None"> Undecided</option>
</select>
<br><br/>
<label > Choose Set-up </label>
<label class='radiolabel'><input type="radio" name="SetUp" value="our" onclick="areaTimesType(); getSetUp(); calculateTotal();" />Our Grow Set Up</label><br/>
<label class='radiolabel'><input type="radio" name="SetUp" value="your" onclick="areaTimesType(); getSetUp(); calculateTotal();" />Your Grow Set Up</label><br/>
<div id="totalPrice">
<!-- <input type="button" id="myButton" name="totalButton" value="Calculate" onclick="claculateTotal();"> -->
</div>
</fieldset>
</div>
</form>
</div><!--End of wrap-->
</body>
</html>
JS：
var num_plant= new Array();
num_plant ["none"] = 0;
num_plant [1] = 1;
num_plant [2] = 2;
num_plant [3] = 3;
num_plant [4] = 4;
num_plant [5] = 5;
num_plant [6] = 6;
num_plant [7] = 7;
num_plant [8] = 8;
num_plant [9] = 9;
num_plant [10] = 10;
num_plant [11] = 11;
num_plant [12] = 12;
num_plant [13] = 13;
num_plant [14] = 14;
num_plant [15] = 15;
num_plant [16] = 16;
num_plant [17] = 17;
num_plant [18] = 18;
num_plant [19] = 19;
num_plant [20] = 20;
num_plant [21] = 21;
num_plant [22] = 22;
num_plant [23] = 23;
num_plant [24] = 24;
num_plant [25] = 25;
var square_inches = new Array();
square_inches ["seeds"]=16;
square_inches ["seedlings"]=16;
square_inches ["juveniles"]=64;
square_inches ["adult"]=144;
var type_grow = new Array();
type_grow ["select"] =0;
type_grow ["traditional"] =15;
type_grow ["hydroponic"] =21;
type_grow ["undecided"] =0;
var set_up = new Array();
set_up ["our"] =10;
set_up ["your"] =5;
function getNumberOfPlants()
{
var userNumberChoice=0;
var theForm = document.forms["sqfoot"];
var selectedPlantNum = theForm.elements["plantNumber"];
userNumberChoice = num_plant[selectedPlantNum.value];
return userNumberChoice;
}
function getSquareInches()
{
var thePlantSize=0;
var theForm = document.forms["sqfoot"];
var selectedPlant = theForm.elements["plantType"];
for(var i = 0; i < selectedPlant.length; i++)
{
if(selectedPlant[i].checked)
{
thePlantSize = square_inches[selectedPlant[i].value];
break;
}
}
return thePlantSize;
}
function calculateSquareFeet()
{
return (getNumberOfPlants() * getSquareInches()) / 144;
}
function getGrowType()
{
var userGrowChoice=0;
var theForm = document.forms["sqfoot"];
var selectedGrowType = theForm.elements["Grow_Type"];
userGrowChoice = type_grow[selectedGrowType.value];
return userGrowChoice;
}
function areaTimesType()
{
return calculateSquareFeet() * getGrowType();
}
function getSetUp()
{
var theSetUpChoice=0;
var theForm = document.forms["sqfoot"];
var selectedSetUp = theForm.elements["SetUp"];
for(var j = 0; j < selectedSetUp.length; j++)
{
if(selectedSetUp[j].checked)
{
theSetUpChoice = set_up[selectedSetUp[j].value];
break;
}
}
return theSetUpChoice;
}
function calculateTotal()
{
var theWholeThing = areaTimesType() + getSetUp();
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For grow space $"+theWholeThing;
}
答案 0 :(得分：0)
弄清楚你的问题，就是你的下拉菜单和单选按钮你将实际数字发送到数组而不是实际的单词，而你定义的数组基于单词
即
square_inches ["seeds"]=16;
但是在你的功能中你要求
square_inches [16]
所以你得到了未定义。您所要做的就是更改单选按钮的值和增长类型的下拉列表
这是一个工作小提琴
当您选择单选按钮或更改增长类型下拉列表时，这里会显示您的值警报