1
我正在使用表單並使用函數來創建返回,然後將其用於表單末尾的總計算。爲什麼函數返回undefined?
有兩個函數正在返回undefined
,我一直未能找出原因。我相信我正確訪問表單元素。我使用控制檯日誌檢查了數組鍵並獲取有效數字。
任何幫助將是偉大的。我包含HTML &外部腳本。
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;
}
給我們一個暗示:該功能(S)正在返回'undefined'? –
你有一個html錯誤,我想你的問題:'
是你的JavaScript代碼包裝'