JS按揭计算机:将逗号添加到输入字段时格式不正确

时间:2019-01-24 21:07:07

标签: javascript html

我正在使用抵押计算器,但是我想将逗号添加到表单字段中。这段代码来自另一个答案,在大多数情况下效果很好。问题是任何超过1,000,000的数字都会开始奇怪地格式化。我是JS的新手,因此可以提供任何帮助。

这是流程: 1.用户输入数据 2. JS用逗号重新格式化 3.用户计算时,逗号会在计算之前被去除 4.退还每月付款

HTML

<h5 type="text" id="pmt" name="mPmt">See your monthly payment</h5>

<div class="mortgagecalculator">
<form action="">

<label>Interest Rate (%)<input type="text" id="apr" name="APR"> 
</label>

<label>Loan Term (Years)<input type="text" id="trm" name="APR"> 
</label>

<label>Down Payment <input type="text" id="dPmt" name="dPmt" 
onkeyup="addComma(this);">
</label>

<label>Home Price <input type="text" id="amt" name="amt" 
onkeyup="addComma(this);"></label>

<input type="button" id="sbt" value="Submit">
<input type="reset" id="rst" value="Reset Form">
<ula="reset"="reset"></ula="reset"="reset">
</form></div>

JS

<script type="text/javascript">
    var term;
var apr;
var amt;
var mPmt;
var dPmt;


window.onload = function()
{
  document.getElementById("apr").focus();
  document.getElementById("sbt").onclick = getValues;
};

//use toFixed(2) to reduce the decimal places of mPmt. Use it on the 
mortgage payment output.

function getValues()
{
  term = document.getElementById("trm").value;
  apr = document.getElementById("apr").value;
  amt = document.getElementById("amt").value;
  dPmt = document.getElementById("dPmt").value;
  apr /= 1200;
  term *= 12;
  mPmt = calculatePayment().toFixed(2);
  document.getElementById("pmt").innerHTML ="$" + mPmt +"/mo.";
};

//applied .replace to the amt and dPmt to remove commas before calculating

function calculatePayment()
{   
    var payment = (amt.replace(",", "")-dPmt.replace(",", ""))*(apr * Math.pow((1 + apr), term))/(Math.pow((1 + apr), term) - 1);
return payment;
}

//this adds commas to the form field while typing but I just ripped it from Stack Overflow so I have no idea how the formula works.

        function addComma(txt) {
txt.value = txt.value.replace(",", "").replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
}


</script>

TL:DR更正的JS

<script type="text/javascript">
    var term;
var apr;
var amt;
var mPmt;
var dPmt;


window.onload = function()
{
  document.getElementById("apr").focus();
  document.getElementById("sbt").onclick = getValues;
};

//use toFixed(2) to reduce the decimal places of mPmt. Use it on the 
mortgage payment output.

function getValues()
{
  term = document.getElementById("trm").value;
  apr = document.getElementById("apr").value;
  amt = document.getElementById("amt").value;
  dPmt = document.getElementById("dPmt").value;
  apr /= 1200;
  term *= 12;
  mPmt = calculatePayment().toFixed(2);
  document.getElementById("pmt").innerHTML ="$" + mPmt +"/mo.";
};

//applied .replace to the amt and dPmt to remove commas before calculating

function calculatePayment()
{   
    var payment = (amt.replace(/,/g, "")-dPmt.replace(/,/g, ""))*(apr * Math.pow((1 + apr), term))/(Math.pow((1 + apr), term) - 1);
return payment;
}

//this adds commas to the form field while typing 

        function addComma(txt) {
txt.value = txt.value.replace(/,/g, "").replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
}


</script>

1 个答案:

答案 0 :(得分:0)

在addComma函数中,您的替换仅将替换它遇到的第一个逗号。您需要删除字符串中的每个逗号。在“ txt.value =”:

txt.value.replace(/,/g, "").replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")

g标志表示全局,因此它将捕获字符串中的所有逗号,而不仅仅是第一个。