Почему функции возвращаются не определены?

Я работаю с формой и использую функции для создания возвратов, которые затем будут использоваться для полного расчета в конце формы.

Есть две функции, которые возвращаются undefined и я не смог понять, почему. Я считаю, что я правильно обращаюсь к элементам формы. Я проверил ключи массива с помощью журнала консоли и получил действительные номера.

Любая помощь будет большой. Я включаю HTML и внешний скрипт.

HTML

<title>Square Foot Form</title>
 
 


 <div id="wrap"><code>
 <form action="" id="sqfoot" onsubmit="return false;">
 <div>
 <div>
 <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>
 <label> What size plants are you starting with ? </label>

 <label>Seeds, havn't started yet</label>
 <label> Seedlings, less than 2ft high</label>
 <label> Juvenile, 2 - 4ft high</label>
 <label> Adult, 4ft or higher</label><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>
 <label> Choose Set-up </label>

 <label>Our Grow Set Up</label>
 <label>Your Grow Set Up</label>


 <div id="totalPrice">
 <!-- <input type="button" id="myButton" name="totalButton" value="Calculate" onclick="claculateTotal();"> -->
 </div>

 </fieldset>
 </div>


 
 </div></form><!--End of wrap-->



</code> <p> JS:</p> <pre class="prettyprint linenums">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;
}
1 ответ

выяснили свою проблему, заключается в том, что в ваших выпадающих меню и радиокнопках вы отправляете фактические числа в массив не фактическое слово, в то время как ваши определенные массивы основаны на словах

т.е.

square_inches ["seeds"]=16;

но в вашей функции вы просили

square_inches [16]

поэтому вы становитесь неопределенным. Все, что вам нужно сделать, это изменить значения переключателей и выпадающего типа роста

здесь работает скрипка

http://jsfiddle.net/7mn5a/1/

здесь скрипка с предупреждениями о ваших значениях, когда вы выберете радиокнопку или измените раскрывающийся тип роста

http://jsfiddle.net/7mn5a/2/

licensed under cc by-sa 3.0 with attribution.