我需要将我的脚本从 5 个函数压缩到 1 个并让它仍然有效，同时我需要添加另一个 var 以将最终总计输出到 labor box。示例:现在，我的脚本会将第 1 行的工资率乘以第 1 行的小时数，并将该总数填充到第 1 行的小计中，同样适用于第 2 行直至第 5 行。现在我还需要填充总数在一个名为 totalhours 的框中显示所有小时数。我可以在不让我的脚本太复杂的情况下执行此操作吗？
function rate1(){
var payrate1 = document.getElementById( 'payrate1' ).value;
var hours1 = document.getElementById( 'hours1' ).value;
var subtotal1 = ( payrate1 * 1 ) * ( hours1 * 1 );
document.getElementById( 'payrate1' ).value = payrate1;
document.getElementById( 'hours1' ).value = hours1;
document.getElementById( 'subtotal1' ).value = subtotal1;
}
function rate2(){
var payrate2 = document.getElementById( 'payrate2' ).value;
var hours2 = document.getElementById( 'hours2' ).value;
var subtotal2 = ( payrate2 * 1 ) * ( hours2 * 1 );
document.getElementById( 'payrate2' ).value = payrate2;
document.getElementById( 'hours2' ).value = hours2;
document.getElementById( 'subtotal2' ).value = subtotal2;
}
function rate3(){
var payrate3 = document.getElementById( 'payrate3' ).value;
var hours3 = document.getElementById( 'hours3' ).value;
var subtotal3 = ( payrate3 * 1 ) * ( hours3 * 1 );
document.getElementById( 'payrate3' ).value = payrate3;
document.getElementById( 'hours3' ).value = hours3;
document.getElementById( 'subtotal3' ).value = subtotal3;
}
function rate4(){
var payrate4 = document.getElementById( 'payrate4' ).value;
var hours4 = document.getElementById( 'hours4' ).value;
var subtotal4 = ( payrate4 * 1 ) * ( hours4 * 1 );
document.getElementById( 'payrate4' ).value = payrate4;
document.getElementById( 'hours4' ).value = hours4;
document.getElementById( 'subtotal4' ).value = subtotal4;
}
function rate5(){
var payrate5 = document.getElementById( 'payrate5' ).value;
var hours5 = document.getElementById( 'hours5' ).value;
var subtotal5 = ( payrate5 * 1 ) * ( hours5 * 1 );
document.getElementById( 'payrate5' ).value = payrate5;
document.getElementById( 'hours5' ).value = hours5;
document.getElementById( 'subtotal5' ).value = subtotal5;
}
这是 html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<table style="width: 590px">
<td class="auto-style7" style="width: 110px">Date</td>
<td class="auto-style7" style="width: 165px">Technician</td>
<td class="auto-style7" style="width: 80px">Cost Code</td>
<td class="auto-style7" style="width: 70px">Rate</td>
<td class="auto-style7" style="width: 80px">Hours</td>
<td class="auto-style6" style="width: 80px">Sub Total</td>
</table>
</fieldset>
<table>
<td><input type="text" name="work_date1" style="width: 100px" id="wkdate1" ></td>
<td><input type="text" name="tech_name1" style="width: 165px" id="tech1" ></td>
<td><select type="text" name="cost_code1" style="width: 80px" id="code1">
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
</select></td>
<td><input type="text" name="pay_rate1" style="width: 70px" id="payrate1" onKeyup="rate1()"></td>
<td><input type="text" name="total_hours1" style="width: 80px" id="hours1" onkeyup="rate1()"></td>
<td><input type="text" name="hours_subtotal1" style="width: 80px" id="subtotal1" onPropertychange="getlabor()"></td>
</table>
<table>
<td><input type="text" name="work_date2" style="width: 100px" id="wkdate1" ></td>
<td><input type="text" name="tech_name2" style="width: 165px" id="tech1" ></td>
<td><select type="text" name="cost_code2" style="width: 80px" id="code1" >
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
</select></td>
<td><input type="text" name="rate_2" style="width: 70px" id="payrate2" onKeyup="rate2()"></td>
<td><input type="text" name="total_hours2" style="width: 80px" id="hours2" onkeyup="rate2()" ></td>
<td><input type="text" name="hours_subtotal2" style="width: 80px" id="subtotal2" onPropertychange="getlabor()"></td>
</table>
<table>
<td><input type="text" name="work_date3" style="width: 100px" id="wkdate3" ></td>
<td><input type="text" name="tech_name3" style="width: 165px" id="tech3" ></td>
<td><select type="text" name="cost_code3" style="width: 80px" id="code3" >
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
</select></td>
<td><input type="text" name="pay_rate3" style="width: 70px" id="payrate3" onKeyup="rate3()"></td>
<td><input type="text" name="total_hours3" style="width: 80px" id="hours3" onkeyup="rate3()"></td>
<td><input type="text" name="hours_subtotal3" style="width: 79px" id="subtotal3" onPropertychange="getlabor()"></td>
</table>
<table>
<td><input type="text" name="work_date4" style="width: 100px" id="wkdate4" ></td>
<td><input type="text" name="tech_name4" style="width: 165px" id="tech4" ></td>
<td><select type="text" name="cost_code4" style="width: 80px" id="code4" >
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
</select></td>
<td><input type="text" name="pay_rate4" style="width: 70px" id="payrate4" onKeyup="rate4()"></td>
<td><input type="text" name="total_hours4" style="width: 80px" id="hours4" onKeyup="rate4()"></td>
<td><input type="text" name="hours_subtotal4" style="width: 80px" id="subtotal4" onPropertychange="getlabor()"></td>
</table>
<table>
<td><input type="text" name="work_date5" style="width: 100px" id="wkdate5"></td>
<td><input type="text" name="tech_name5" style="width: 165px" id="tech5"></td>
<td><select type="text" name="cost_code5" style="width: 80px" id="code5">
<option value=""></option>
<option value="200">200</option>
<option value="205">205</option>
</select></td>
<td><input type="text" name="pay_rate5" style="width: 70px" id="payrate5"onKeyup="rate5()"></td>
<td><input type="text" name="total_hours5" style="width: 80px" id="hours5" onkeyup="rate5()"></td>
<td><input type="text" name="hours_subtotal5" style="width: 80px" id="subtotal5" onPropertychange="getlabor()"></td>
</table>
<table>
<td class="auto-style13" style="width: 425">ONE HOUR MINIMUM</td>
<td style="width: 80px" >Total Hours</td>
<td style="width: 70px">
<input type="text" name="total_hours" style="width: 80px" id="totalhours" ></td>
</table>
<table>
<td style="width: 423px; height: 22px;" class="auto-style7">
</td>
<td style="width: 80px; height: 22px;" class="auto-style6">Material</td>
<td style="height: 22px">
<input type="text" name="material_total" style="width: 80px" id="materialtotal" onpropertychange="" ></td>
</table>
<table>
<td style="width: 423px; height: 22px;"></td>
<td style="width: 80px; height: 22px;" class="auto-style6">Labor</td>
<td style="height: 22px">
<input type="text" name="labor_cost" id="labortotal" style="width: 80px"></td>
</table>
<table>
<td style="width: 423px; height: 22px;" class="auto-style7"><input type="submit" action="#" value="Get Signature"> <input type="reset" action="reset" value="Reset Form"></td>
<td style="width: 80px; height: 22px;">Grand Total</td>
<td style="height: 22px"><input type="text" name="grand_total" id="total" style="width: 80px"></td>
</table>
</body>
</html>
最佳答案
这个怎么样:
function rate(rateNumber){
var payrate = document.getElementById( 'payrate' + rateNumber ).value;
var hours = document.getElementById( 'hours' + rateNumber ).value;
document.getElementById( 'subtotal' + rateNumber ).value = payrate * hours;
}
编辑:如前所述，您实际上不需要再次设置“payrate”和“hours”元素的值，因为它们没有更改
Edit2:如前所述，您不需要将工资率和小时数乘以 1。简化了上面的函数
关于javascript - 如何压缩代码中的 Javascript？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16780697/