javascript - onKeyup または onChange を入力するための入力ボックスを取得できません

Question

したがって、数量ボックスと価格ボックスに数値を入力すると、必要に応じて内線ボックスに合計されるフォームがあります。行を下に進んで数量と価格を追加すると、合計の計算が続行され、材料の合計が入力されますが、税金が追加されず、合計ボックスが入力されます。材料の合計ボックスに金額を手動で入力すると、税金と合計が自動的に入力され、合計が正確になります。onChange、onKeyup、さらには onInput を使用してみましたが、何も機能しないようです。

これが私の売上税スクリプトです：

function tax(){
var material = document.getElementById( 'material' ).value;
var salestax = Math.round(((material / 100) * 8.1)*100)/100;
var total = (material*1) + (salestax * 1);

document.getElementById( 'material' ).value = material;
document.getElementById( 'salestax' ).value = salestax;
document.getElementById( 'total' ).value = total;
}

スクリプトに関連する html は次のとおりです。

<table>
<td style="width: 40px;">
<td style="width: 465px;" class="auto-style6">Material Total</td> 
<td><input type="text" name="material_total"style="width: 55px"id="material"onChange="tax()"></td>
</table>

<table>
<td style="width: 40px;">
<td style="width: 465px;" class="auto-style6">Sales Tax</td> 
<td><input type="text" name="sales_tax" style="width: 55px" id="salestax" onChange="tax()"></td>
</table>

<table>
<td style="width: 40px;">
<td style="width: 465px;" class="auto-style6">Shipping</td> 
<td><input type="text" name="ship_cost" style="width: 55px" id="shipping"></td>
</table>

<table>
<td style="width: 40px;">
<td style="width: 465px;" class="auto-style6">Total</td>
<td><input type="text" name="total_parts_cost" style="width: 55px"  id="total"></td>
</table>

質問への更新：それで遊んだ後、onpropertychangeがフォームを機能させることがわかりましたが、IE（私はIE 10を使用しています）でのみ機能し、Firefoxでは機能しません。それが機能し、onkeyup を使用するため、Ext ボックスに自動入力する Qty ボックスと Price ボックスを合計するために使用するコードを含めています。税務課でなぜそれが機能しないのか理解できません。

enter code here    function multiply1() {
var extend1 = 1;
for (var i = 1; i <= 2; i++) {
    var id = "1_value" + i;
    extend1 = extend1 * document.getElementById(id).value;
}
document.getElementById("extend1").value = extend1;
summate();
}

function multiply2() {
var extend2 = 1;
for (var i = 1; i <= 2; i++) {
    var id = "2_value" + i;
    extend2 = extend2 * document.getElementById(id).value;
}
document.getElementById("extend2").value = extend2;
summate();
}

function multiply3() {
var extend3 = 1;
for (var i = 1; i <= 2; i++) {
    var id = "3_value" + i;
    extend3 = extend3 * document.getElementById(id).value ;
}
document.getElementById("extend3").value = extend3;
summate();
}

function multiply4() {
var extend4 = 1;
for (var i = 1; i <= 2; i++) {
    var id = "4_value" + i;
    extend4 = extend4 * document.getElementById(id).value;
}
document.getElementById("extend4").value = extend4;
summate();
}

function multiply5() {
var extend5 = 1;
for (var i = 1; i <= 2; i++) {
    var id = "5_value" + i;
    extend5 = extend5 * document.getElementById(id).value;
}
document.getElementById("extend5").value = extend5;
summate();
}

function summate() {
var material = 0;
for (var i = 1; i <= 5; i++) {
    var id = "extend" + i;
    material = material + document.getElementById(id).value * 1;
}
document.getElementById("material").value = material;
}