我有js代码，你可以输入数字（没有逗号）和计算。
我的js脚本计算正常，但主要问题是当我用逗号（，）输入数字时我有错误/我的公式不起作用。
这是我的代码段。
注意：我使用逗号设置默认值，但我的公式并不合适。 但是当你没有使用逗号时它可以正常工作
三江源！
function change() {
var loanamount_total = $("#loanamount").val();
var loanintrest = $("#loanintrest").val();
var period = $("#period").val();
var per_year = $("#per_year").val();
var downpayment_percent = $("#downpayment").val();
var downpayment = (Number(downpayment_percent) * Number(loanamount_total)) / 100;
var loanamount = Number(loanamount_total) - Number(downpayment);
var intrest = (loanintrest / 100) / 12;
var permonth = calculate(loanamount , Number(period) * 12 );
var total_amount = permonth * Number(period) * 12;
var total_intrest = total_amount - loanamount;
$("#permonth").text("AED" + permonth);
$("#downpament_a").text("AED" + downpayment.toFixed(2));
$("#loanamount_total").text("AED" + Number(loanamount_total).toFixed(2));
$("#total_interest").text("AED" + total_intrest.toFixed(2));
$("#total_amount").text("AED" + total_amount.toFixed(2));
var total_intrest_percent = (Number(total_intrest) * 100) / Number(total_amount);
var total_amount_precent = (Number(loanamount) * 100) / Number(total_amount);
var left_amount = Number(total_amount);
var loanamount_left = Number(loanamount);
$( "#tbody" ).html("");
for(var i=1; i <= Number(period) * 12; i++) {
var intrest_l = intrest * loanamount_left;
left_amount = left_amount - permonth;
var principle = permonth - intrest_l;
loanamount_left = loanamount_left - principle;
$( "#tbody" ).append( "<tr style='background-color: #FBFCFF;border-top: dotted #DEEEFE 1px;'><td style='padding:5px'> "+ i +" </td><td> AED"+ permonth +" </td> <td>AED" + principle.toFixed(2) +" </td><td>AED" + intrest_l.toFixed(2) + "</td> <td> AED"+ left_amount.toFixed(2) +" </td></tr>" );
}
}
$("body").on("keyup", "#downpayment , #loanintrest , #loanamount , #period, #per_year", function () {
change();
});
$(function () {
change();
});
function calculate(amount , term)
{
// Standard Mortgage Formula:
// M = P[i(1+i)n] / [(1+i)n - 1]
// x = (1+i)n
var P = amount;
var i = ($('#loanintrest').val().replace(/[^0-9\.]/g, '') / 100) / 12;
var n = term;
var x = Math.pow((1 + i ), n);
var M = ( P * ((i * x) / (x - 1)) ).toFixed(2);
return M;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default panel-sidebar-1 filter-checkbox-container">
<div class="panel-heading"><h3><?php _l('Mortgage'); ?></h3></div>
<div class="panel-body">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>-->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="form-group mamount">
<label for="loanamount" class="col-md-12 control-label">{lang_mort_property_price}</label>
<div class="col-md-12">
<div class="input-group">
<input value="4,000" name="loanamount" id="loanamount" class="form-control">
<span class="input-group-addon">AED</span>
</div>
</div>
</div><!--form group ammount end-->
<div class="form-group mamount">
<label for="loanamount" class="col-md-12 control-label">{lang_mort_downpay}</label>
<div class="col-md-12">
<div class="input-group">
<input type="number" value="20" name="downpayment" id="downpayment" class="form-control">
<span class="input-group-addon">%</span>
</div>
</div>
</div><!--form group ammount end-->
<div class="form-group mamount">
<label for="loanamount" class="col-md-12 control-label">{lang_mort_interest}</label>
<div class="col-md-12">
<div class="input-group">
<input type="number" value="5" name="loanintrest" id="loanintrest" class="form-control">
<span class="input-group-addon">%</span>
</div>
</div>
</div><!--form group ammount end-->
<div class="form-group mamount">
<label for="loanamount" class="col-md-12 control-label">{lang_mort_year}</label>
<div class="col-md-12">
<div class="input-group">
<input type="number" value="5" name="period" id="period" class="form-control">
<span class="input-group-addon">Year</span>
</div>
</div>
</div><!--form group ammount end-->
</div><!--panel body end-->
</br>
<!-- Chart Area-->
<div class="accordion" id="accordionArea">
<div class="accordion-group panel">
<!--result-->
<div class="accordion-heading accordionize"> <a class="accordion-toggle active" data-toggle="collapse" data-parent="#accordionArea" href="#mortresult"><i class="fa fa-calculator"></i> Result <i class="fa fa-angle-down"></i> </a> </div>
<div id="mortresult" class="accordion-body in collapse">
<div class="accordion-inner">
<p> {lang_mort_month} : <strong > <span style="float:right" id="permonth"> 0 </span> </strong> </p>
<p> {lang_mort_downpay} :<strong> <span style="float:right" id="downpament_a"> 0 </span> </strong> </p>
<p> {lang_mort_tamount} :<strong> <span style="float:right" id="loanamount_total"> 0 </span> </strong> </p>
<p> {lang_mort_tinterest} :<strong> <span style="float:right" id="total_interest"> 0 </span> </strong> </p>
<p> {lang_mort_tpay} :<strong> <span style="float:right" id="total_amount"> 0 </span> </strong> </p>
<a data-toggle="modal" data-target="#disclaimer">{lang_mort_disclaimer}</a>
<div class="modal fade" id="disclaimer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p><font color="red">Warning</font> - The information provided by this tool is for guidance, and does not include all of the details you need to choose a mortgage. Figures given by this calculator do not constitute an offer to lend to you.</p>
<p>This calculator is designed to give you an indication of the amount that we may be able to lend you on a capital repayment basis. The results shown above are estimates and should be used as guide only. The maximum we would consider lending will depend on your individual situation, the property you are purchasing (e.g. new build), the loan you choose and the amount you wish to borrow. The actual amount will depend on checks that we subsequently undertake and further fees and charges may apply.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default inverted" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div><!--inner end-->
</div><!--accordion body end-->
<!--chart-->
<!--
<div class="accordion-heading accordionize"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#mortchart"><i class="fa fa-pie-chart"></i> View Chart <i class="fa fa-angle-down"></i> </a> </div>
<div id="mortchart" class="accordion-body collapse">
<div class="accordion-inner">
<div id="hightcart_container" style=""></div>
</div>
</div>-->
<!--accordion body end-->
<!--
<div class="accordion-heading accordionize"> <a class="accordion-toggle" data-toggle="modal" data-target="#monthg" href="#mortmonthly"> Monthly Payment Guide </a> </div>
<div class="modal fade" id="monthg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body"> <table style="width:100%" id="printTable">
<thead style="background:#DEEEFE;width:100%;">
<tr style="width:100%">
<td style=" width:20%"> Month </td>
<td style=" width:20%" > Per/Month </td>
<td style=" width:20%" > Principle </td>
<td style=" width:20%" > Interest </td>
<td style=" width:20%"> Balance </td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
<thead style="background:#DEEEFE;width:100%;">
<tr style="width:100%">
<td style=" width:20%"> Month </td>
<td style=" width:20%" > Per/Month </td>
<td style=" width:20%" > Principle </td>
<td style=" width:20%" > Interest </td>
<td style=" width:20%"> Balance </td>
</tr>
</thead>
</table> </div>
<div class="modal-footer">
<button type="button" class="btn btn-default inverted" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
-->
</div><!--accordion end-->
</div><!--accordion end-->
</div><!--panel panel end-->
答案 0 :(得分：3)
在计算之前，只需从输入值中替换所有逗号
var loanamount_total = $("#loanamount").val().replace(/,/g, "");
<强>演示
function change() {
var loanamount_total = $("#loanamount").val().replace(/,/g, "");
var loanintrest = $("#loanintrest").val();
var period = $("#period").val();
var per_year = $("#per_year").val();
var downpayment_percent = $("#downpayment").val();
var downpayment = (Number(downpayment_percent) * Number(loanamount_total)) / 100;
var loanamount = Number(loanamount_total) - Number(downpayment);
var intrest = (loanintrest / 100) / 12;
var permonth = calculate(loanamount , Number(period) * 12 );
var total_amount = permonth * Number(period) * 12;
var total_intrest = total_amount - loanamount;
$("#permonth").text("AED" + permonth);
$("#downpament_a").text("AED" + downpayment.toFixed(2));
$("#loanamount_total").text("AED" + Number(loanamount_total).toFixed(2));
$("#total_interest").text("AED" + total_intrest.toFixed(2));
$("#total_amount").text("AED" + total_amount.toFixed(2));
var total_intrest_percent = (Number(total_intrest) * 100) / Number(total_amount);
var total_amount_precent = (Number(loanamount) * 100) / Number(total_amount);
var left_amount = Number(total_amount);
var loanamount_left = Number(loanamount);
$( "#tbody" ).html("");
for(var i=1; i <= Number(period) * 12; i++) {
var intrest_l = intrest * loanamount_left;
left_amount = left_amount - permonth;
var principle = permonth - intrest_l;
loanamount_left = loanamount_left - principle;
$( "#tbody" ).append( "<tr style='background-color: #FBFCFF;border-top: dotted #DEEEFE 1px;'><td style='padding:5px'> "+ i +" </td><td> AED"+ permonth +" </td> <td>AED" + principle.toFixed(2) +" </td><td>AED" + intrest_l.toFixed(2) + "</td> <td> AED"+ left_amount.toFixed(2) +" </td></tr>" );
}
}
$("body").on("keyup", "#downpayment , #loanintrest , #loanamount , #period, #per_year", function () {
change();
});
$(function () {
change();
});
function calculate(amount , term)
{
// Standard Mortgage Formula:
// M = P[i(1+i)n] / [(1+i)n - 1]
// x = (1+i)n
var P = amount;
var i = ($('#loanintrest').val().replace(/[^0-9\.]/g, '') / 100) / 12;
var n = term;
var x = Math.pow((1 + i ), n);
var M = ( P * ((i * x) / (x - 1)) ).toFixed(2);
return M;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default panel-sidebar-1 filter-checkbox-container">
<div class="panel-heading"><h3><?php _l('Mortgage'); ?></h3></div>
<div class="panel-body">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>-->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="form-group mamount">
<label for="loanamount" class="col-md-12 control-label">{lang_mort_property_price}</label>
<div class="col-md-12">
<div class="input-group">
<input value="4,000" name="loanamount" id="loanamount" class="form-control">
<span class="input-group-addon">AED</span>
</div>
</div>
</div><!--form group ammount end-->
<div class="form-group mamount">
<label for="loanamount" class="col-md-12 control-label">{lang_mort_downpay}</label>
<div class="col-md-12">
<div class="input-group">
<input type="number" value="20" name="downpayment" id="downpayment" class="form-control">
<span class="input-group-addon">%</span>
</div>
</div>
</div><!--form group ammount end-->
<div class="form-group mamount">
<label for="loanamount" class="col-md-12 control-label">{lang_mort_interest}</label>
<div class="col-md-12">
<div class="input-group">
<input type="number" value="5" name="loanintrest" id="loanintrest" class="form-control">
<span class="input-group-addon">%</span>
</div>
</div>
</div><!--form group ammount end-->
<div class="form-group mamount">
<label for="loanamount" class="col-md-12 control-label">{lang_mort_year}</label>
<div class="col-md-12">
<div class="input-group">
<input type="number" value="5" name="period" id="period" class="form-control">
<span class="input-group-addon">Year</span>
</div>
</div>
</div><!--form group ammount end-->
</div><!--panel body end-->
</br>
<!-- Chart Area-->
<div class="accordion" id="accordionArea">
<div class="accordion-group panel">
<!--result-->
<div class="accordion-heading accordionize"> <a class="accordion-toggle active" data-toggle="collapse" data-parent="#accordionArea" href="#mortresult"><i class="fa fa-calculator"></i> Result <i class="fa fa-angle-down"></i> </a> </div>
<div id="mortresult" class="accordion-body in collapse">
<div class="accordion-inner">
<p> {lang_mort_month} : <strong > <span style="float:right" id="permonth"> 0 </span> </strong> </p>
<p> {lang_mort_downpay} :<strong> <span style="float:right" id="downpament_a"> 0 </span> </strong> </p>
<p> {lang_mort_tamount} :<strong> <span style="float:right" id="loanamount_total"> 0 </span> </strong> </p>
<p> {lang_mort_tinterest} :<strong> <span style="float:right" id="total_interest"> 0 </span> </strong> </p>
<p> {lang_mort_tpay} :<strong> <span style="float:right" id="total_amount"> 0 </span> </strong> </p>
<a data-toggle="modal" data-target="#disclaimer">{lang_mort_disclaimer}</a>
<div class="modal fade" id="disclaimer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p><font color="red">Warning</font> - The information provided by this tool is for guidance, and does not include all of the details you need to choose a mortgage. Figures given by this calculator do not constitute an offer to lend to you.</p>
<p>This calculator is designed to give you an indication of the amount that we may be able to lend you on a capital repayment basis. The results shown above are estimates and should be used as guide only. The maximum we would consider lending will depend on your individual situation, the property you are purchasing (e.g. new build), the loan you choose and the amount you wish to borrow. The actual amount will depend on checks that we subsequently undertake and further fees and charges may apply.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default inverted" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div><!--inner end-->
</div><!--accordion body end-->
<!--chart-->
<!--
<div class="accordion-heading accordionize"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#mortchart"><i class="fa fa-pie-chart"></i> View Chart <i class="fa fa-angle-down"></i> </a> </div>
<div id="mortchart" class="accordion-body collapse">
<div class="accordion-inner">
<div id="hightcart_container" style=""></div>
</div>
</div>-->
<!--accordion body end-->
<!--
<div class="accordion-heading accordionize"> <a class="accordion-toggle" data-toggle="modal" data-target="#monthg" href="#mortmonthly"> Monthly Payment Guide </a> </div>
<div class="modal fade" id="monthg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body"> <table style="width:100%" id="printTable">
<thead style="background:#DEEEFE;width:100%;">
<tr style="width:100%">
<td style=" width:20%"> Month </td>
<td style=" width:20%" > Per/Month </td>
<td style=" width:20%" > Principle </td>
<td style=" width:20%" > Interest </td>
<td style=" width:20%"> Balance </td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
<thead style="background:#DEEEFE;width:100%;">
<tr style="width:100%">
<td style=" width:20%"> Month </td>
<td style=" width:20%" > Per/Month </td>
<td style=" width:20%" > Principle </td>
<td style=" width:20%" > Interest </td>
<td style=" width:20%"> Balance </td>
</tr>
</thead>
</table> </div>
<div class="modal-footer">
<button type="button" class="btn btn-default inverted" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
-->
</div><!--accordion end-->
</div><!--accordion end-->
</div><!--panel panel end-->
答案 1 :(得分：0)
问题是 Number（）需要一个实际数字，但由于您的数字不纯，它会返回 NAN 。
在需要逗号分隔数字的地方添加一个简单的函数可以解决这个问题。
function removeCommas(val){
return val.split(',').join('');
}
和
var loanamount_total = removeCommas($("#loanamount").val());
例如，上面的例子工作正常。