如何在代码中压缩Javascript？

时间：2013-05-27 21:21:20

标签： javascript

我需要将我的脚本从5个函数压缩到1并使其仍然有效，同时我需要添加另一个var来将最终总计输出到人工框。示例：现在我的脚本会将第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">&nbsp; <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>

2 个答案:

答案 0 :(得分：7)

这个怎么样：

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：如上所述，您无需将payrate和hours乘以1.简化上述功能

答案 1 :(得分：3)

这可能会进一步优化，但是在这里上午12点刚回家，但承诺是一个承诺

这是工作jsfiddle，它至少适用于IE，Chrome和FF

以下是Javascript，您可以使用之前的文件结构来容纳它们：

function multiplyRow(row) {

    var this_qty = row+"_value1"    
    var this_price = row+"_value2"
    var this_extend = "extend"+row; 
    document.getElementById(this_extend).value = 
     (parseInt(document.getElementById(this_qty).value) *
     parseInt(document.getElementById(this_price).value) )  || 0 ;
     summate();        

}

function rateRow(row){
  var this_payrate = "payrate"+row;
  var this_hours = "hours"+row;
  var this_subtot = "subtotal"+row;
   document.getElementById(this_subtot).value =
    (parseInt(document.getElementById(this_payrate).value) *
     parseInt(document.getElementById(this_hours).value) )  || 0 ;
    getlabor();

}

function summate() {
            var materialcost=0
            for (var i=1; i <= 5; i++) {
                var id = "extend"+i;
                var thisVal =  parseInt(document.getElementById(id).value,10) || 0;
                materialcost +=  thisVal ;
            }
            document.getElementById("materialcost").value = materialcost || 0;
            tax();
            grandTotal();
        }

function getlabor() {
            var labortotal=0
            var hourCounter=0
            for (var i=1; i <= 5; i++) {
                var id = "subtotal"+i;
                var idHours = "hours"+i;
                var thisVal =  parseInt(document.getElementById(id).value,10) || 0;
                var thisValHours =  parseInt(document.getElementById(idHours).value,10) || 0;
                labortotal +=  thisVal ;    
                hourCounter +=  thisValHours ;    

            }
            document.getElementById("labortotal").value = labortotal|| 0;
            document.getElementById("totalhours").value = hourCounter|| 0;
            grandTotal();

}

function tax(){
    var materialcost = document.getElementById( 'materialcost' ).value || 0;
    var shipping = document.getElementById( 'shipping' ).value || 0;
    var salestax = (Math.round(((materialcost / 100) * 8.1)*100)/100) || 0;
    var materialtotal = ( (materialcost * 1) + (salestax * 1) + (shipping * 1) ) || 0;

    document.getElementById( 'materialcost' ).value = materialcost; 
    document.getElementById( 'salestax' ).value = salestax;
    document.getElementById( 'shipping' ).value = shipping;
    document.getElementById( 'materialtotal' ).value = materialtotal;
    grandTotal();


}

    function grandTotal(){
        var labor = parseInt(document.getElementById("labortotal").value ,10)   || 0;
        var material = parseFloat(document.getElementById("materialtotal").value ,10)   || 0;
        document.getElementById( 'grandtotal' ).value =  (labor + material).toFixed(2);             
    }

根据David的要求，这里的HTML很长（我更改了函数名称以及它们是如何调用的）

<body style="background-color: #EEEEEE">
<h1 class="auto-style12">Work Order</h1>
<p class="auto-style14">THIS FORM ONLY WORKS IN INTERNET EXPLORER AT THIS TIME!</p>

<form method="post" action="#">
<fieldset style="width: 588px" border="3">
<table style="width: 585px"><td style="width: 40px" class="auto-style7">Qty</td>
<td style="width: 100px"class="auto-style7">Manufacture</td>
<td style="width: 95px" class="auto-style7">Part Number</td>
<td style="width: 200px"class="auto-style7">Description</td>
<td style="width: 65px" class="auto-style7">Price</td>
<td style="width: 65px" class="auto-style7">Ext</td>
</table>
</fieldset>
<table>     
<td><input type="text" name="qty_1" style="width: 40px" id="1_value1" onkeyup="multiplyRow(1)">                         </td>
<td class="auto-style7"><input type="text" name="manuf_1"           style="width: 100px"            id="manuf1">                            </td>
<td><input type="text" name="part_number1"      style="width: 95px"             id="partnumber1">                       </td>
<td><input type="text" name="part_description1" style="width: 200px"            id="partdesc1">                         </td>
<td>
<input type="text" name="part_price1"       style="width: 65px"     id="1_value2" onKeyup="multiplyRow(1)"> </td>
<td>
<input type="text" name="total"             style="width: 65px"     id="extend1"  onKeyup="summate()">      </td>
</table>    

<table>
<td><input type="text" name="qty_1"             style="width: 40px"             id="2_value1" onkeyup="multiplyRow(2)">                         </td>
<td><input type="text" name="manuf_1"           style="width: 100px">                                                   </td>
<td><input type="text" name="part_number1"      style="width: 95px">                                                    </td>
<td><input type="text" name="part_description1" style="width: 200px">                                                   </td>
<td>
<input type="text" name="part_price1"       style="width: 65px"     id="2_value2" onKeyup="multiplyRow(2)"> </td>
<td>
<input type="text" name="total"             style="width: 65px"     id="extend2"  onKeyup="summate()">      </td>
</table>

<table>
<td><input type="text" name="qty_1"             style="width: 40px"             id="3_value1" onkeyup="multiplyRow(3)">                         </td>
<td><input type="text" name="manuf_1"           style="width: 100px">                                                   </td>
<td><input type="text" name="part_number1"      style="width: 95px">                                                    </td>
<td><input type="text" name="part_description1" style="width: 200px">                                                   </td>
<td>
<input type="text" name="part_price1"       style="width: 65px"     id="3_value2" onKeyup="multiplyRow(3)"> </td>
<td>
<input type="text" name="total"             style="width: 65px"     id="extend3"  onKeyup="summate()">      </td>
</table>

<table>
<td><input type="text" name="qty_1"             style="width: 40px"             id="4_value1" onkeyup="multiplyRow(4)">                         </td>
<td><input type="text" name="manuf_1"           style="width: 100px">                                                   </td>
<td><input type="text" name="part_number1"      style="width: 95px">                                                    </td>
<td><input type="text" name="part_description1" style="width: 200px">                                                   </td>
<td>
<input type="text" name="part_price1"       style="width: 65px"     id="4_value2" onKeyup="multiplyRow(4)"> </td>
<td>
<input type="text" name="total"             style="width: 65px"     id="extend4"  onKeyup="summate()">      </td>
</table>

<table>
<td><input type="text" name="qty_1"             style="width: 40px"             id="5_value1" onkeyup="multiplyRow(5)">                         </td>
<td><input type="text" name="manuf_1"           style="width: 100px">                                                   </td>
<td><input type="text" name="part_number1"      style="width: 95px">                                                    </td>
<td><input type="text" name="part_description1" style="width: 200px">                                                   </td>
<td>
<input type="text" name="part_price1"       style="width: 65px"     id="5_value2" onKeyup="multiplyRow(5)"> </td>
<td>
<input type="text" name="total"             style="width: 65px"     id="extend5"  onKeyup="summate()">      </td>
</table>

<table>
<td class="auto-style11" style="width: 410; height: 20"></td>
<td style="width: 100px; height: 20px;" class="auto-style6">Material Cost</td> <td><input type="text" name="material_cost"  style="width: 65px; height: 20px;"  id="materialcost" onpropertychange="tax()"></td>
</table>

<table>
<td class="auto-style11" style="width: 410; height: 22"></td>
<td style="width: 100px; height: 22px;" class="auto-style6">Sales Tax</td> <td style="height: 22px">
<input type="text" name="sales_tax"         style="width: 65px"     id="salestax" ></td>
</table>

<table>
<td class="auto-style11" style="width: 410; height: 22"></td>
<td style="width: 100px; height: 22px;" class="auto-style6">Shipping</td> <td style="height: 22px">
<input type="text" name="ship_cost"         style="width: 65px"     id="shipping" onkeyup="tax()"></td>
</table>

<table>
<td class="auto-style9" style="width: 250px"><strong>Description of Work Performed</strong></td>
</table>
<table style="width: 588px">
<textarea name="TextArea1" rows="2" style="width: 585px"></textarea>
</table>
<fieldset style="width: 598px">
<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>
<option value="210">210</option>
<option value="215">215</option>
<option value="220">220</option>
<option value="225">225</option>
<option value="230">230</option>
<option value="235">235</option>
<option value="240">240</option>
<option value="245">245</option>
<option value="250">250</option>
<option value="255">255</option>
<option value="260">260</option>
<option value="265">265</option>
<option value="270">270</option>
<option value="275">275</option>
<option value="280">280</option>
<option value="285">285</option>
<option value="290">290</option>
<option value="299">299</option>
<option value="400">400</option>
<option value="405">405</option>
<option value="410">410</option>
<option value="415">415</option>
<option value="420">420</option>
<option value="425">425</option>
<option value="499">499</option>
</select></td>
<td><input type="text"  name="pay_rate1"        style="width: 70px"     id="payrate1" onKeyup="rateRow(1)"></td>
<td><input type="text"  name="total_hours1"     style="width: 80px"     id="hours1" onkeyup="rateRow(1)"></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>
<option value="210">210</option>
<option value="215">215</option>
<option value="220">220</option>
<option value="225">225</option>
<option value="230">230</option>
<option value="235">235</option>
<option value="240">240</option>
<option value="245">245</option>
<option value="250">250</option>
<option value="255">255</option>
<option value="260">260</option>
<option value="265">265</option>
<option value="270">270</option>
<option value="275">275</option>
<option value="280">280</option>
<option value="285">285</option>
<option value="290">290</option>
<option value="299">299</option>
<option value="400">400</option>
<option value="405">405</option>
<option value="410">410</option>
<option value="415">415</option>
<option value="420">420</option>
<option value="425">425</option>
<option value="499">499</option>
</select></td>
<td><input type="text"  name="rate_2"           style="width: 70px"     id="payrate2" onKeyup="rateRow(2)"></td>
<td><input type="text"  name="total_hours2"     style="width: 80px"     id="hours2" onkeyup="rateRow(2)" ></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>
<option value="210">210</option>
<option value="215">215</option>
<option value="220">220</option>
<option value="225">225</option>
<option value="230">230</option>
<option value="235">235</option>
<option value="240">240</option>
<option value="245">245</option>
<option value="250">250</option>
<option value="255">255</option>
<option value="260">260</option>
<option value="265">265</option>
<option value="270">270</option>
<option value="275">275</option>
<option value="280">280</option>
<option value="285">285</option>
<option value="290">290</option>
<option value="299">299</option>
<option value="400">400</option>
<option value="405">405</option>
<option value="410">410</option>
<option value="415">415</option>
<option value="420">420</option>
<option value="425">425</option>
<option value="499">499</option>
</select></td>
<td><input type="text"  name="pay_rate3"        style="width: 70px"     id="payrate3" onKeyup="rateRow(3)"></td>
<td><input type="text"  name="total_hours3"     style="width: 80px"     id="hours3" onkeyup="rateRow(3)"></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>
<option value="210">210</option>
<option value="215">215</option>
<option value="220">220</option>
<option value="225">225</option>
<option value="230">230</option>
<option value="235">235</option>
<option value="240">240</option>
<option value="245">245</option>
<option value="250">250</option>
<option value="255">255</option>
<option value="260">260</option>
<option value="265">265</option>
<option value="270">270</option>
<option value="275">275</option>
<option value="280">280</option>
<option value="285">285</option>
<option value="290">290</option>
<option value="299">299</option>
<option value="400">400</option>
<option value="405">405</option>
<option value="410">410</option>
<option value="415">415</option>
<option value="420">420</option>
<option value="425">425</option>
<option value="499">499</option>
</select></td>
<td><input type="text"  name="pay_rate4"        style="width: 70px"     id="payrate4" onKeyup="rateRow(4)"></td>
<td><input type="text"  name="total_hours4"     style="width: 80px"     id="hours4" onKeyup="rateRow(4)"></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>
<option value="210">210</option>
<option value="215">215</option>
<option value="220">220</option>
<option value="225">225</option>
<option value="230">230</option>
<option value="235">235</option>
<option value="240">240</option>
<option value="245">245</option>
<option value="250">250</option>
<option value="255">255</option>
<option value="260">260</option>
<option value="265">265</option>
<option value="270">270</option>
<option value="275">275</option>
<option value="280">280</option>
<option value="285">285</option>
<option value="290">290</option>
<option value="299">299</option>
<option value="400">400</option>
<option value="405">405</option>
<option value="410">410</option>
<option value="415">415</option>
<option value="420">420</option>
<option value="425">425</option>
<option value="499">499</option>
</select></td>
<td><input type="text"  name="pay_rate5"        style="width: 70px"         id="payrate5"onKeyup="rateRow(5)"></td>
<td><input type="text"  name="total_hours5"     style="width: 80px"         id="hours5" onkeyup="rateRow(5)"></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" style="width: 80px" id="labortotal" onPropertychange=""></td>
</table>

<table>
<td style="width: 423px; height: 22px;" class="auto-style7"><input type="submit" action="#" value="Get Signature">&nbsp; <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="grandtotal" style="width: 80px"></td>
</table>
</form> 
</center>

</body>

解释

parseInt()从字符串或字段中获取数字，在这种情况下很可能不需要，但这会解析数字，例如，如果输入$ 50，它将提取50而不是抛出错误。

document.getElementById("totalhours").value = hourCounter|| 0;

我们在使用|| 0时所做的是，如果没有有效值，我们告诉Javascript返回数字0，因为我们使用空字段执行操作（因为有一点我们没有填充它还会返回错误，因为它会尝试将数字添加到未定义的值，因此我们将未定义的值转换为数字0，以便我们能够执行有效的操作。

相关问题
最新问题