無法獲取輸入框以填充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中使用。 我包括用於總計數量和價格框的代碼，這些代碼會自動填充Ext框，因為這可以工作並且我使用onkeyup。 我不明白為什么它不適用於稅款。

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;
}

Answer 1

我想我知道您在問什么：onchange事件不會針對材質框觸發，因為它是通過編程方式進行更改的，因此不會觸發。

您可以手動觸發此功能。 看來您正在修改summate（）函數中的材料框。 要使物料箱記錄更改，請將以下行添加到summate（）函數的最后：

document.getElementById("material").onchange();

希望那是您想要的。 我認為，如果您希望在修改框時進行更新，則可能需要在某些數量或其他字段上添加此類內容。

編輯：這僅在您為材質元素設置了onchange屬性時才有效（我注意到您將其更改為oninput）。