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

Question

我有一个如下的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 所以总计

5 * 2 = 10

因此来自 javascript 函数的总数为 10

现在，如果我将数量编辑为 1，插入 5*1 = 5，我将得到 10 + ( 5 * 1) = 15 ！ ) 我怎样才能防止这种情况？

Answer 1

对旧的总数使用隐藏值

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

Answer 2

有一个隐藏字段

<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 = '';