我的代码有问题，不知道为什么会这样。我在 javascript 中使用多个函数调用 onchange 事件。当用户在字段中输入值时，javascript 函数会通过 onchange 事件更改其他值。但问题是，我在 onchange 事件中只使用了一个函数，然后它可以很好地进行计算。 另一方面，当多个函数用于 onchange 事件时，两个函数都会随机调用。我需要防止这意味着我只需要那个需要的函数调用。 为什么两个函数都调用，如何根据需要分别调用？
function update_net_amount(){
var moduleprice = $('#module').val();
var charges = $('#charges').val();
var amount1 = ( ( parseInt(moduleprice) + parseInt(charges) ) );
var discount1 = $('#discount').val();
var netamount1 = amount1 - discount1;
$('#netamount1').val( netamount1 );
alert("amc1==="+netamount1);
}
function update_net_amount_percentage(){
var moduleprice = $('#module').val();
var charges = $('#charges').val();
var discount = $('#discount1').val();
var amount1 = ( parseInt(moduleprice) + parseInt(charges) );
var netamount = ( (amount1 * discount) / 100 );
var total = amount1 - netamount;
$('#netamount1').val( total );
alert("amc2==="+total);
}
function update_net_amount_percenatge_amount(){
var moduleprice = $('#module').val();
var charges = $('#amcpercent').val();
var netamount = ( (moduleprice * charges) / 100 );
var amount2 = ( parseInt(moduleprice) + parseInt(netamount) );
var discount = $('#discount').val();
var nettotal = amount2 - discount;
$('#netamount1').val( nettotal );
alert("amc3==="+nettotal);
}
function update_net_amount_percenatge_amount_percentage(){
var moduleprice = $('#module').val();
var charges = $('#amcpercent').val();
var netamounts = ( (moduleprice * charges) / 100 );
var amount3 = ( parseInt(moduleprice) + parseInt(netamounts) );
var discounts = $('#discount1').val();
var disamount = (( amount3 * discounts ) / 100 );
var fulltotal = amount3 - disamount;
$('#netamount1').val(fulltotal);
alert("amc4==="+fulltotal);
/* discount in % subtracts from amount3 */
}<html>
<div class="pro-add">
<form action="" method="post" enctype="multipart/form-data" id="name">
<label>Project</label>
<span class="txt-val"><input type="text" name="pro" value="<?php echo $data['fvprojectname']; //from database ?>" disabled="disabled" /></span>
<label>Module</label>
<span class="txt-val"><input type="text" name="mod" value="<?php echo $data['fvmodulename']; //from database?>" disabled="disabled" /></span><br />
<label>AMC</label>
<span class="txt-val amc"><input type="text" id="charges" onchange="javascript:update_net_amount();" name="charges" placeholder="amount in rupees only." value="0" /></span>
<label>or</label>
<span class="txt-val amc-per"><input type="text" name="percentcharges" id="amcpercent" onchange="javascript:update_net_amount_percenatge_amount();" placeholder="in %" /> %</span>
<div class="invoice-table">
<table style="border-collapse: collapse; border: 1px solid black; text-align:center; width:130%;">
<tr>
<td rowspan="2" class="col-all" style="border: 1px solid black; background-color: #00701c; color: #fff; font-weight:bold;">
Sr. No.</td>
<td rowspan="2" class="col-all" style="border: 1px solid black; background-color: #00701c; color: #fff; font-weight:bold;"> Price Per Module</td>
<th colspan="3" class="col-all" style="border: 1px solid black; background-color: #00701c; color: #fff; font-weight:bold;">
Amount</th>
</tr>
<tr>
<td colspan="2" class="col-all" style="border: 1px solid black; background-color: #00701c; color: #fff; font-weight:bold;">
Discount</td>
<td colspan="2" class="col-all" style="border: 0px solid black; background-color: #00701c; color: #fff; font-weight:bold;">
Net Amount</td>
</tr>
<?php global $counter; $counter=1; ?>
<tr>
<td rowspan="2" style="border: 0px solid black;"><?php echo $counter++; ?></td>
</tr>
<tr>
<td style="border-collapse: collapse; border: 1px solid black;"><input type="text" id="module" name="price" placeholder="module price." value="<?php echo $data['fiamount']; //from database?>" onchange="javascript:update_net_amount();" /></td>
<td colspan="2" style="border-collapse: collapse; border: 1px solid black;"><input type="text" id="discount" onchange="javascript:update_net_amount();update_net_amount_percenatge_amount();" name="discount" class="set-tr" placeholder="enter discount in rupees." /> or
<input type="text" id="discount1" onchange="javascript:update_net_amount_percentage();update_net_amount_percenatge_amount_percentage();" name="perdiscount" class="set-tr-per" placeholder="enter discount in %." /></td>
<td colspan="2" style="border-collapse: collapse; border: 1px solid black;"><input type="text" id="netamount1" name="net" class="set-tr-net" placeholder="net amount in rupees." value="<?php //echo $data['fiamount']; ?>" onchange="javascript:update_net_amount_percenatge_amount();" /></td>
</tr>
</table>
</div>
<br/>
<span class="btn-adding"><input type="submit" name="adding" value="Save" /></span>
<span class="btn-cancel"><input type="submit" name="cancel" value="Cancel" /></span>
</form>
</div>
</html>如何调用需要javascript中单独的onchange事件的调用函数。
在此先感谢，请帮助我。
最佳答案
不要内联调用所有函数，将事件代码写在 js 文件中。
例子:
$('#charges').change( function(){
update_net_amount();
})
$('#discount1').change( function(){
update_net_amount_percentage();
update_net_amount_percenatge_amount_percentage();
})
从 html 中删除 onchange 事件:
<input type="text" id="discount1" name="perdiscount" class="set-tr-per" placeholder="enter discount in %." />
关于javascript - 如何防止在javascript中自动多次调用onchange函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45160088/