好吧,我有一个JavaScript工具,可以在其中计算总和(例如10,000)的百分比(%)。当我输入值(例如10,000)和百分比(例如10%)时它可以工作,但是问题是,我只添加了一个增量和减量按钮,因此用户不必写10,000、30,000等。他们可以使用我的增量和减量按钮。不幸的是,在按下增量和减量按钮后,结果没有显示。如果我手动输入号码,那么它正在工作。
实时工具:
http://propertyjungle.com.au/tools.php
JavaScript代码:
<script>
function incrementValue()
{
var value = parseInt(document.getElementById('pvalue1').value, 10);
value = isNaN(value) ? 0 : value;
value +=10000
document.getElementById('pvalue1').value = value;
}
function decrementValue()
{
var value = parseInt(document.getElementById('pvalue1').value, 10);
value = isNaN(value) ? 0 : value;
value -=10000
document.getElementById('pvalue1').value = value;
}
function toggleIncrement()
{
var value = parseFloat(document.getElementById('pvalue2').value, 10);
value = isNaN(value) ? 0 : value;
value +=0.1
document.getElementById('pvalue2').value = value;
}
function toggleDecrement()
{
var value = parseFloat(document.getElementById('pvalue2').value, 10);
value = isNaN(value) ? 0 : value;
value -=0.1
document.getElementById('pvalue2').value = value;
}
jQuery(document).ready(function () {
$('#pvalue1').change(function () {
var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100;
$('#pvalue3').val(agentfee);
var percentagereduce = parseFloat($('#pvalue2').val(), 10) - 0.1;
var newvalue = parseFloat($('#pvalue1').val(), 10) * percentagereduce / 100;
$('#pvalue4').val(newvalue);
var takevalue1 = parseFloat($('#pvalue3').val(), 10);
var takevalue2 = parseFloat($('#pvalue4').val(), 10);
var finalvalue = takevalue1 - takevalue2;
$('#pvalue5').val(finalvalue);
});
$('#pvalue2').change(function () {
var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100;
$('#pvalue3').val(agentfee);
var percentagereduce = parseFloat($('#pvalue2').val(), 10) - 0.1;
var newvalue = parseFloat($('#pvalue1').val(), 10) * percentagereduce / 100;
$('#pvalue4').val(newvalue);
var takevalue1 = parseFloat($('#pvalue3').val(), 10);
var takevalue2 = parseFloat($('#pvalue4').val(), 10);
var finalvalue = takevalue1 - takevalue2;
$('#pvalue5').val(finalvalue);
});
});
</script>
HTML程式码:
<table>
<tr>
<td>House Sale Price:</td>
<td>$<input name="pvalue1" onkeypress="validate(event)" value="" placeholder=" Enter Sale Price" style="width:140px;" type="number" value="<?=$pvalue1?>" id="pvalue1" size="20" class="required inputfield2" required ></td>
<td><input type="button" onClick="incrementValue()" value="+" /><input type="button" onClick="decrementValue()" value="-" /> </td>
</tr>
<tr>
<td>Rate quoted by agent:</td>
<td> <input name="pvalue2" onkeypress="validate(event)" value="0" placeholder=" Percentage" style="width:140px;" type="number" value="<?=$pvalue2?>" id="pvalue2" size="20" class="required inputfield2" required >%</td>
<td><input type="button" onClick="toggleIncrement()" value="+" /><input type="button" onClick="toggleDecrement" value="-" /></td>
</tr>
</table>
<h2>Results</h2>
<table>
<tr><td>Agent Fees:</td><td>$<input name="pvalue3" value="0" placeholder="" type="number" value="<?=$pvalue3?>" id="pvalue3" size="10" class="resultfield" ></td></tr>
<tr><td></td><td><div id='show-me' style='display:none'><input name="pvalue4" value="0" placeholder="" type="number" value="<?=$pvalue4?>" id="pvalue4" size="10" class="resultfield" ></div></td></tr>
<tr><td>Reducing the rate the agent is charging by 0.1% will save you: </td><td>$<input name="pvalue5" value="0" placeholder="" type="number" value="<?=$pvalue5?>" id="pvalue5" size="10" class="resultfield" ></td></tr>
</table>
之所以发生这种情况,是因为更改字段的值不会触发该change
事件:为什么当我使用val()设置select的值时,jquery change事件没有触发?
如果您不想重构所有代码,则可以简单地触发jQuerychange
事件,然后运行计算:
function toggleIncrement(){
...
$("#pvalue1").trigger("change");
}
function toggleDecrement(){
...
$("#pvalue1").trigger("change");
}
...
例子。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句