javascript - 无法使用 onKeyup 或 onChange 填充输入框

Question

所以我有一个表单，当您在“数量”和“价格”框中输入数字时，它会按应有的方式在“扩展”框中将它们总计起来。当您继续向下行添加更多数量和价格时，它会继续计算总计并按应有的方式填充“ Material 总计”，但它不会按应有的方式添加税并填充“总计”框。如果您在“ Material 总计”框中手动输入金额，则税费和总计将自动填充，并且总计是正确的。我尝试过使用 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)，但不能在火狐浏览器中。我包含了用于计算数量和价格框的总和的代码，这些框自动填充了 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事件不会为 Material 框触发，因为它是以编程方式更改的，因此不会触发。

您可以手动触发此功能。您似乎正在修改 summate() 函数中的 Material 框。要使 Material 框注册更改，请将以下行添加到 summate() 函数的最末尾:

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

希望这就是您想要的。我认为如果您希望在修改盒子时更新它，您可能还必须在某些数量或其他字段上添加此类内容。

编辑:只有当您为 Material 元素设置了 onchange 属性时，这才有效(我注意到您将其更改为 oninput)。