计算文档准备好的javascript

Question

我希望字段“ sub_total”随着各种字段的更改而更新，而不是在更新一个特定字段时更新（即：“ add_on”）

我尝试将$（document）.ready（function（）{添加到代码的顶部，但是如果我添加它，它根本不会计算。

HTML：

<td>Total Cost Full Day</td>
<input type="text" name="total_full" id="total_full"  />

<td>&nbsp;</td>
    <td>&nbsp;</td>

 <td>Total Cost Half Day</td>
<input type="text" name="total_half" id="total_half"  />

<td>&nbsp;</td>
    <td>&nbsp;</td>


<td>Addon Charge</td>
<input type="text" name="add_on" id="add_on"  />

<td>&nbsp;</td>
    <td>&nbsp;</td>


<td>Sub Total</td>
<input name="sub_total" type="text" id="sub_total" />​

JAVASCRIPT

//Calculate Sub Total


function calculateSubTotal() {

    var SubTotal = +total_full.value + +total_half.value + +add_on.value;

    document.getElementById("sub_total").value = isNaN(SubTotal) ? 0 : SubTotal;
}


document.getElementById("add_on").onchange = calculateSubTotal;
document.getElementById("add_on").onkeyup = calculateSubTotal;​

Answer 1

您需要使用jQuery来使用$(document).ready类的东西。 否则它将无法正常工作。

那是我最喜欢的方法，但是也可以使用window.onload类的方法。 参见下文...我还更改了您的小计的计算。 除非声明了名为total_full ， total_half和add_on变量， total_half在分配事件时，仍然需要以与获取元素相同的方式获取元素。

window.onload=function(){
//Calculate Sub Total


function calculateSubTotal() {

    var SubTotal = +document.getElementById("total_full").value + +document.getElementById("total_half").value + +document.getElementById("add_on").value;

    document.getElementById("sub_total").value = isNaN(SubTotal) ? 0 : SubTotal;
}


document.getElementById("add_on").onchange = calculateSubTotal;
document.getElementById("add_on").onkeyup = calculateSubTotal;
document.getElementById("total_full").onchange = calculateSubTotal;
document.getElementById("total_full").onkeyup = calculateSubTotal;
document.getElementById("total_half").onchange = calculateSubTotal;
document.getElementById("total_half").onkeyup = calculateSubTotal;

}

Answer 2

如果您的函数使用add_on字段，则应将该函数绑定到要计算的每个字段上。 就像您为“ add_on”所做的一样。

因此，每次更改其中一个字段时，您的函数都会更新小计。