javascript - ドキュメント対応の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、イベントを割り当てるときに取得したのと同じ方法で要素を取得する必要があります。

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」の場合と同じように。

したがって、フィールドの1つを変更するたびに、関数は小計を更新します。