Question

好吧，我有一个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>&nbsp;&nbsp;<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>

Answer 1

这种情况正在发生，因为更改字段的值不会触发change事件：Why does the jquery change event not trigger when I set the value of a select using val()?

如果您不想重构所有代码，只需触发jQuery change事件，然后运行计算：

function toggleIncrement(){
    ...
    $("#pvalue1").trigger("change");
}

function toggleDecrement(){
    ...
    $("#pvalue1").trigger("change");
}

...

Example

单击增量/减量按钮后，Javascript Equation Result未显示

1 个答案: