Javascript计算工具工作得并不完美

Javascript计算工具工作得并不完美,javascript,jquery,html,Javascript,Jquery,Html,我有一个Javascript计算工具,它有时有效,有时无效。我不明白为什么 以下是我的演示工具: 在我的“销售时的固定代理成本”工具中,有5个字段: 1) 房屋销售价格 2) 代理报价 3) 其他费用 “结果”部分有两个字段: 1) 代理费: 2) 将代理的收费率降低0.1%将为您节省成本 它会自动显示结果。我是说按键 因此,当我同时递增“房屋销售价格”和“报价率…”时,两个结果字段都会显示“NaN”。但它应该显示出它的价值。。e、 g: House Sales Price = 10000 R

我有一个Javascript计算工具,它有时有效,有时无效。我不明白为什么

以下是我的演示工具:

在我的“销售时的固定代理成本”工具中,有5个字段:

1) 房屋销售价格
2) 代理报价
3) 其他费用

“结果”部分有两个字段:
1) 代理费:
2) 将代理的收费率降低0.1%将为您节省成本

它会自动显示结果。我是说按键

因此,当我同时递增“房屋销售价格”和“报价率…”时,两个结果字段都会显示“NaN”。但它应该显示出它的价值。。e、 g:

House Sales Price  = 10000
Rated Quoted  = 0.3%
Other Fees = 0 (empty)

Result: 

Agent Fees = 30 (House Sales Prices * Rated Quoted )
Reducing.... = 10 (0.1% of House sales Price)
之后,如果我增加“其他费用”,它会显示结果,但结果是错误的。它应该是,例如:

Correct Result: 

Agent Fees = 10030 (House Sales Prices * Rated Quoted + Other Fees[increment by 10,000] )
Reducing.... = 10 (0.1% of House sales Price) 

Wrong Result :

Agent Fees = 10030 (House Sales Prices * Rated Quoted + Other Fees[increment by 10,000] )
Reducing.... = 10010.00 
这是我的完整代码:

Javascript:

    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 incrementValueO()
{
    var value = parseInt(document.getElementById('otherFees').value, 10);
    value = isNaN(value) ? 0 : value;
    value +=10000
    document.getElementById('otherFees').value = value;
     $('#pvalue1').trigger("change");
}

function decrementValueO()
{
    var value = parseInt(document.getElementById('otherFees').value, 10);
    value = isNaN(value) ? 0 : value;
    value -=10000
    document.getElementById('otherFees').value = value;
}


function toggleIncrement()
{
    var value = parseFloat(document.getElementById('pvalue2').value, 10);
    value = isNaN(value) ? 0 : value;
    value +=0.1
    value = parseFloat(value).toFixed(2)
    document.getElementById('pvalue2').value = value;
     $('#pvalue1').trigger("change");
}

function toggleDecrement()
{
    var value = parseFloat(document.getElementById('pvalue2').value, 10);
    value = isNaN(value) ? 0 : value;
    value -=0.1
    value = parseFloat(value).toFixed(2)
    document.getElementById('pvalue2').value = value;
     $('#pvalue1').trigger("change");
}

jQuery(document).ready(function(){
 $('#pvalue1').change(function(){
 var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100; 
 console.debug( parseFloat(document.getElementById('otherFees').value));
 var otherFees = parseFloat(document.getElementById('otherFees').value);
 var totalOtherFees = agentfee + otherFees;
 $('#pvalue3').val(totalOtherFees);

 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;
 var finalvalue = parseFloat(finalvalue).toFixed(2)
 $('#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);    
});   
   $('#otherFees').change(function(){
 var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100; 
 console.debug( parseFloat(document.getElementById('otherFees').value));
 var otherFees = parseFloat(document.getElementById('otherFees').value);
 var totalOtherFees = agentfee + otherFees;
 $('#pvalue3').val(totalOtherFees);

 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;
 var finalvalue = parseFloat(finalvalue).toFixed(2)
 $('#pvalue5').val(finalvalue);   
});
});   
Html代码:

    <table border="0" cellpadding="5">
<tr>
    <td>House Sale Price:</td>
    <td>$</td>
    <td><input name="pvalue1" class="form-control"  onkeypress="validate(event)" placeholder=" Enter Sale Price" type="number" value="<?=$pvalue1?>" id="pvalue1" size="20" 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>%</td>
    <td><input name="pvalue2"  class="form-control" onkeypress="validate(event)" placeholder=" Percentage" type="number" value="<?=$pvalue2?>" id="pvalue2" size="20"  required ></td>
    <td><input type="button" onClick="toggleIncrement()" value="+" /><input type="button" onClick="toggleDecrement()" value="-" /></td>
</tr>
<tr>
    <td>Other Fees</td>
    <td>$</td>
    <td><input name="otherFees" class="form-control"  onkeypress="validate(event)" placeholder=" Enter Sale Price" type="number" value="<?=$pvalue1?>" id="otherFees" size="20" required ></td>
    <td><input type="button" onClick="incrementValueO()" value="+" /><input type="button" onClick="decrementValueO()" value="-" /> </td>
</tr>

</table>                                                                                                                                                                                                                   
 <input name="doRegister" type="submit" id="doRegister" value="Calculate" style="color:white;font-size:20px;" class="btn btn-primary">

<br><br>
<h2>Results</h2>
<table>
<tr>
<td>Agent Fees:</td>
<td>$</td>
<td><input name="pvalue3"  onkeypress="validate(event)"  class="form-control"  placeholder="" type="number" value="<?=$pvalue3?>" id="pvalue3" size="10" class="resultfield"  ></td></tr>
<tr>
<td></td>
<td><span id='show-me'  class="form-control" style='display:none'><input name="pvalue4" placeholder="" type="number" value="<?=$pvalue4?>" id="pvalue4" size="10" class="resultfield"  ></span></td></tr>
<tr>
<td>Reducing the rate the agent is charging by 0.1% will save you: </td>
<td>$</td>
<td><input name="pvalue5"   onkeypress="validate(event)" class="form-control"  placeholder="" type="number" value="<?=$pvalue5?>" id="pvalue5" size="10" class="resultfield"  ></td>
</tr>
</table>  

房屋销售价格:
$
parseInt(“”)
为NaN


在上面的代码中处理isNaN,在这里实现相同的逻辑。

添加console.log行,然后查看从表单中获取错误值的位置。您还可以添加断点并遍历代码。将jQuery和getelementById@epascarello我对我的代码感到抱歉,因为我是网络开发新手。:)当你加减1000的时候,你是怎么解决的
var agentfee = parseFloat($('#pvalue1').val(), 10) * parseFloat($('#pvalue2').val(), 10) / 100; 
console.log($('#pvalue1').val());  //3
console.log( $('#pvalue2').val());  // ""