Onchange事件在编辑同一字段后重复计算

onchange event repeats calculation after editing the same field

本文关键字：计算 字段 事件 编辑 Onchange      更新时间：2023-09-26

我有一个javascript如下:

function calculateBill(id,price)
 {
var t = document.getElementById('total').value;

var qty = document.getElementById('qty_'+id).value;
var total = qty * price;

var tcost = Number(t) + Number(total);
document.getElementById('total').value = '';
//tcost = parseFloat(tcost);
document.getElementById('total').value = tcost.toFixed( 0 ) ;   
}

这个函数在onchange事件中调用<input type="text" id = "qty_<?php echo $i2; ?>" name="qty_<?php echo $i2; ?>" onchange="calculateBill('<?php echo $i2; ?>','<?php echo round($r2[$i2]['ret_price'],2); ?>')" />由于它是一个onchange事件，因此每当我更改值时，它都会计算总成本。现在我的问题是，当我想要更新以前输入的值，它计算新的金额到旧的总额。

(假设数量的前值为2，比率为5，那么total

5 * 2 = 10

from javascript function

现在如果我将数量编辑为1，而不是5*1 = 5，我将得到10 + (5*1)= 15 !）我该如何预防呢?

为旧的total设置隐藏值

<input type="hidden" id="old_total" value="<?=$total?>">

仅用于计算，使用id old_total 

var t = document.getElementById('old_total').value;

使用id total

显示输出
document.getElementById('total').value = tcost.toFixed( 0 ) ;

设置隐藏字段

<input type="hidden" id="hidden_total"/>

设置隐藏字段值为加载表单时的初始值。

现在，在函数内部，使用hidden_total值来添加，并在完成计算后将其设置为0。

function calculateBill(id,price)
{
 var t = document.getElementById('hidden_total').value;
 var qty = document.getElementById('qty_'+id).value;
 var total = qty * price;
 var tcost = Number(t) + Number(total);
 document.getElementById('total').value = tcost.toFixed( 0 ) ;   
}

你可能需要更新重置隐藏字段的值，一旦你计算，这取决于你的需要。在这种情况下，在最后一行添加以下内容;

 document.getElementById('hidden_total').value = '';
相关文章：