1
저는 폼의 함수를 사용하여 반환 값을 생성하는 중입니다. 그런 다음 폼의 끝에 총 계산에 사용됩니다.함수가 정의되지 않은 이유는 무엇입니까?
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;
}
아래로 성장한다 유형 드롭을 변경 우리에게 힌트를 줄? –
당신의 문제를 일으키는 html 오류가 있습니다 :'
은 귀하의 자바 스크립트 코드입니다. '