复杂的Javascript数组 - 总结值并将值插入表格

Question

尝试修改相当复杂的数组代码。基本上，我想添加输入的总小时数，然后将该值返回到输入名称=“total_hrs”，但卡住了！也将不胜感激任何帮助简化/清理剧本！谢谢。这里的脚本：

<script language="JavaScript" type="text/javascript"> 
<!-- 
function subCalc(the_form) 
{ 
var subtotal = 0; 
var subtemp = 0; 
var totalHrs = 0; 

// put the calories and form fields into parallel arrays. 
var calorie_array = new Array() 
calorie_array[0] = 72; 
calorie_array[1] = 86; 
calorie_array[2] = 100; 
calorie_array[3] = 126; 
calorie_array[4] = 130; 
calorie_array[5] = 180; 
calorie_array[6] = 156; 
calorie_array[7] = 182; 
calorie_array[8] = 210; 
calorie_array[9] = 250; 
calorie_array[10] = 270; 
calorie_array[11] = 390; 
calorie_array[12] = 390; 
calorie_array[13] = 546; 

var time_array = new Array() 
time_array[0] = the_form.sleeping_time; 
time_array[1] = the_form.TV_time; 
time_array[2] = the_form.sit_time; 
time_array[3] = the_form.cook_time; 
time_array[4] = the_form.stand_time; 
time_array[5] = the_form.wash_time; 
time_array[6] = the_form.walk_S_time; 
time_array[7] = the_form.house_time; 
time_array[8] = the_form.walk_M_time; 
time_array[9] = the_form.gard_time; 
time_array[10] = the_form.danc_time; 
time_array[11] = the_form.stairs_time; 
time_array[12] = the_form.jog_time; 
time_array[13] = the_form.sqsh_time; 

var sub_array = new Array() 
sub_array[0] = the_form.cal0; 
sub_array[1] = the_form.cal1; 
sub_array[2] = the_form.cal2; 
sub_array[3] = the_form.cal3; 
sub_array[4] = the_form.cal4; 
sub_array[5] = the_form.cal5; 
sub_array[6] = the_form.cal6; 
sub_array[7] = the_form.cal7; 
sub_array[8] = the_form.cal8; 
sub_array[9] = the_form.cal9; 
sub_array[10] = the_form.cal10; 
sub_array[11] = the_form.cal11; 
sub_array[12] = the_form.cal12; 
sub_array[13] = the_form.cal13; 


for(i = 0; i < calorie_array.length; i++) 
{ 
// Give subtemp the value or the calorie times the time. 
subtemp = (calorie_array[i] * time_array[i].value); 

// Put the converted string into the form field. 
sub_array[i].value = checkAmount(subtemp); 

// Add the converted number value to subtotal. 
subtotal += roundFloat(subtemp); 

} 
for(i = 0; i < time_array.length; i++) 
{ 
hours = (time_array[i].value); 
totalHrs += roundFloat(hours); 
} 

return subtotal; 
} 

function totalCalc() { 
var form; 
var subtotal; 
var total; 
var totalHrs; 
var hours; 

form = document.calc_form; 
// get the value of subtotal from totalCalc. 
subtotal = subCalc(form); 
totalHrs = subCalc(form); 

// Add the NUMBER values and subtotal. 
total = subtotal; 

// Convert this number into a string and display. 
form.total.value = checkAmount(total); 

// Adds total hours. 
hours = totalHrs 
form.total_hrs.value = checkAmount(hours); 
} 


function roundFloat(num) { 
num = parseFloat(num); 
num = Math.round(100*num)/100 

return num 
} 

function checkAmount(num) { 
// Convert into a floating point number. 
num = parseFloat(num) 
// Round the number off. 
num = Math.round(100*num)/100 
// Turn into a string. 
num = String(num) 
// Return the converted string. 
return num 
} 

//--> 
</script> 

和HTML：

<form name="calc_form" id="form" method="post"> 
<table width="310" border="0" bgcolor="#EAEAEA"> 
<tr> 
<th width="95"><h2>Activity</h2></th><th width="70"><h2>Time <br>(in hours)</h2></th> 
<th width="101"><h2>Calories used per hour</h2></th> 
</tr> 
<tr class="table-text"> 
<td class="right"><p class="table-text">Sleeping</p></td> 
<td width="70"> 
<p class="table-text"> 
<input name="sleeping_time" type="text" id="sleeping_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" /> 
hrs</p></td> 
<td width="101"> 
<p class="table-text"> 
<input name="cal0" type="text" id="cal0" size="6" maxlength="6" /> 
kcals</p></td> 
</tr> 
<tr> 
<td class="right"><p class="table-text">Eating/Reading/<br>Watching TV</p></td> 
<td width="70"><p class="table-text"> 
<input name="TV_time" type="text" id="TV_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" /> 
hrs</p></td> 
<td width="101"><p class="table-text"> 
<input name="cal1" type="text" id="cal1" size="6" maxlength="6" /> 
</span>kcals</td> 
</tr> 
<tr> 
<td class="right"><p class="table-text">Sitting</p></td> 
<td width="70"><p class="table-text"> 
<input name="sit_time" type="text" id="sit_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" /> 
hrs</p></td> 
<td width="101"><p class="table-text"> 
<input name="cal2" type="text" id="cal2" size="6" maxlength="6" /> 
kcals</p></td> 
</tr> 
<tr> 
<td class="right"><p class="table-text">Cooking</p></td> 
<td width="70"><p class="table-text"> 
<input name="cook_time" type="text" id="cook_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" /> 
hrs</p></td> 
<td width="101"><p class="table-text"> 
<input name="cal3" type="text" id="cal3" size="6" maxlength="6" /> 
kcals</p></td> 
</tr> 
<tr> 
<td class="right"><p class="table-text">Standing</p></td> 
<td width="70"><p class="table-text"> 
<input name="stand_time" type="text" id="stand_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" /> 
hrs</p></td> 
<td width="101"><p class="table-text"> 
<input name="cal4" type="text" id="cal4" size="6" maxlength="6" /> 
kcals</p></td> 
</tr> 
<tr> 
<td class="right"><p class="table-text">Washing &amp; Dressing</p></td> 
<td width="70"><p class="table-text"> 
<input name="wash_time" type="text" id="wash_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" /> 
hrs</p></td> 
<td width="101"><p class="table-text"> 
<input name="cal5" type="text" id="cal5" size="6" maxlength="6" /> 
kcals</p></td> 
</tr> 
<tr> 
<td class="right"><p class="table-text">Walking Slowly</p></td> 
<td width="70"><p class="table-text"> 
<input name="walk_S_time" type="text" id="walk_S_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" /> 
hrs</p></td> 
<td width="101"><p class="table-text"> 
<input name="cal6" type="text" id="cal6" size="6" maxlength="6" /> 
kcals</p></td> 
</tr> 
<tr> 
<td class="right"><p class="table-text">Light housework</p></td> 
<td width="70"><p class="table-text"> 
<input name="house_time" type="text" id="house_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" /> 
hrs</p></td> 
<td width="101"><p class="table-text"> 
<input name="cal7" type="text" id="cal7" size="6" maxlength="6" /> 
kcals</p></td> 
</tr> 
<tr> 
<td class="right"><p class="table-text">Walking moderately</p></td> 
<td width="70"><p class="table-text"> 
<input name="walk_M_time" type="text" id="walk_M_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" /> 
hrs</p></td> 
<td width="101"><p class="table-text"> 
<input name="cal8" type="text" id="cal8" size="6" maxlength="6" /> 
kcals</p></td> 
</tr> 
<tr> 
<td class="right"><p class="table-text">Light gardening</p></td> 
<td width="70"><p class="table-text"> 
<input name="gard_time" type="text" id="gard_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" /> 
hrs</p></td> 
<td width="101"><p class="table-text"> 
<input name="cal9" type="text" id="cal9" size="6" maxlength="6" /> 
kcals</p></td> 
</tr> 
<tr> 
<td class="right"><p class="table-text">Dancing</p></td> 
<td width="70"><p class="table-text"> 
<input name="danc_time" type="text" id="danc_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" /> 
hrs</p></td> 
<td width="101"><p class="table-text"> 
<input name="cal10" type="text" id="cal10" size="6" maxlength="6" /> 
kcals</p></td> 
</tr> 
<tr> 
<td class="right"><p class="table-text">Walking up stairs</p></td> 
<td width="70"><p class="table-text"> 
<input name="stairs_time" type="text" id="stairs_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" /> 
hrs</p></td> 
<td width="101"><p class="table-text"> 
<input name="cal11" type="text" id="cal11" size="6" maxlength="6" /> 
kcals</p></td> 
</tr> 
<tr> 
<td class="right"><p class="table-text">Jogging</p></td> 
<td width="70"><p class="table-text"> 
<input name="jog_time" type="text" id="jog_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" /> 
hrs</p></td> 
<td width="101"><p class="table-text"> 
<input name="cal12" type="text" id="cal12" size="6" maxlength="6" /> 
kcals</p></td> 
</tr> 
<tr> 
<td class="right"><p class="table-text">Squash</p></td> 
<td width="70"><p class="table-text"> 
<input name="sqsh_time" type="text" id="sqsh_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" /> 
hrs</p></td> 
<td width="101"><p class="table-text"> 
<input name="cal13" type="text" id="cal13" size="6" maxlength="6" /> 
kcals</p></td> 
</tr> 

<tr> 
<td><p class="table-text">&nbsp;</p></td> 
<td width="70"><p class="table-text"></p></td> 
<td width="101"><p class="table-text"></p></td> 
</tr> 

<tr> 
<td><p class="table-text"><strong>Totals = </strong></p></td> 
<td width="70"><p class="table-text"> 
<input name="total_hrs" type="text" id="total_hrs" size="3" /> 
hrs</p></td> 
<td width="101"><p class="table-text"> 
<input name="total" type="text" id="total" size="6" /> 
kcals</p></td> 
</tr> 

<tr> 
<td colspan="2"><INPUT name="reset" value="Reset" TYPE="reset"> </td> 
<td colspan="2"><input name="Calculate Total" type="button" id="Calculate Total" value="Calculate Total" onclick="totalCalc();" /></td> 
</tr> 
</table> 
</form> 

Answer 1

我做你的代码在这里的修改版本：http://pastebin.com/7L7i7dSk

请注意，我结合你的脚本和为方便起见，在一个文档中使用HTML，除此之外没有其他原因，如果您愿意，可以将它们分开。

下已被更改：

• 线68添加一个+哪种类型强制转换的值的数

• 线72功能subCalc现在返回像这样的数组：

  return [subtemp, subtotal, totalHrs]

  （我不知道你是否真的打算使用subtemp，但我是ë包括它。）

• 线81名为totals新数组被声明

• 线85.新阵列中填充的 subCalc

• 线89-90的返回值。 subtotal和totalHrs分别给出了它们的 值。 （这是你的原始代码中的问题，据我所知，它们都被赋予相同的值;总卡路里）。

Answer 2

入住此行

subtotal = subCalc(form); 
totalHrs = subCalc(form); 

如果你看一下函数subCalc它总是返回大部所以第二行是不正确的。

您可以将此功能分成两部分。一个返回总数，另一个返回 小时。

祝您的项目顺利！