OnClick事件后输入值每三位后加逗号

Question

我有一个表格/表格，用于计算抵押贷款的每月还款额。当按下计算按钮时，JavaScript 函数将根据输入的值进行计算，并将该计算的值设置在 Monthly Payment 输入中。我的问题是当为该输入设置值时，该值显示时不带逗号。例如，1543 而不是 1,543。如果有人知道在每月付款输入中添加逗号，那就太好了。这是抵押贷款计算器的图片，其中列出了Monthly Payment 输入：

这是抵押贷款计算器的代码：

<form action="POST" name="myform">
        <table border="1" bgcolor="#006666">
          <tr> 
            <td align="center" colspan="2"> 
              <script
           language="JavaScript"><!--
function CarLoanCalculator()
{
    form = document.myform
    LoanAmount= form.LoanAmount.value
    LoanAmount = LoanAmount.replace(/,/g, "");
    parseInt(LoanAmount);   
    DownPayment= "0"
    AnnualInterestRate = form.InterestRate.value/100
    Years= form.NumberOfYears.value
        MonthRate=AnnualInterestRate/12
    NumPayments=Years*12
    Prin=LoanAmount-DownPayment

    MonthPayment=Math.floor((Prin*MonthRate)/(1-Math.pow((1+MonthRate),(-1*NumPayments)))*100)/100
    commafy ("MonthPayment")
        form.NumberOfPayments.value=NumPayments
    form.MonthlyPayment.value=MonthPayment

}
        // --></script>

        <script type="text/javascript">
            function format(input)
            {
                var nStr = input.value + '';
                nStr = nStr.replace( /\,/g, "");
                x = nStr.split( '.' );
                x1 = x[0];
                x2 = x.length > 1 ? '.' + x[1] : '';
                var rgx = /(\d+)(\d{3})/;
                while ( rgx.test(x1) ) {
                    x1 = x1.replace( rgx, '$1' + ',' + '$2' );
                }
                input.value = x1 + x2;
            }
        </script>

            <font color="#FFFFFF"
            size="2" face="arial narrow"><b>Mortgage Calculator</b> <br>
              Enter Your Details &amp; Click the Calculate Button</font></td>
          </tr>
          <tr> 
            <td> 
              <table border="0" cellpadding="2">
                <tr> 
                  <td align="right"><font color="#FFFFFF"
                    size="2" face="arial narrow">Finance Amount $ </font></td>
                  <td><font color="#FFFFFF" size="2"
                   face="arial narrow"> 
                    <input type="text"
                    size="10" name="LoanAmount" value="30,000"
                    onBlur="CarLoanCalculator()" onkeyup="format(this)" onChange="CarLoanCalculator()">
                    <br>
                    </font></td>
                </tr>
                <tr> 
                  <td align="right"><font color="#FFFFFF"
                    size="2" face="arial narrow">Annual Interest Rate </font></td>
                  <td><font color="#FFFFFF" size="2"
                   face="arial narrow"> 
                    <input type="text"
                    size="3" name="InterestRate" value="7.0"
                   onBlur="CarLoanCalculator()" onChange="CarLoanCalculator()">
                    % <br>
                    </font></td>
                </tr>
                <tr> 
                  <td align="right"><font color="#FFFFFF"
                   size="2" face="arial narrow">Term of Mortgage</font></td>
                  <td><font color="#FFFFFF" size="2"
                   face="arial narrow"> 
                    <input type="text"
                    size="3" name="NumberOfYears" value="4"
                    onBlur="CarLoanCalculator()" onChange="CarLoanCalculator()">
                    Years<br>
                    </font></td>
                  <td><font color="#FFFFFF" size="2"
                    face="arial narrow"> 
                    <input type="button"
                    name="morgcal" value="Calculate"
                   language="JavaScript" onClick="CarLoanCalculator()">
                    </font></td>
                </tr>
                <tr> 
                  <td colspan="3"><font color="#FFFFFF"></font></td>
                </tr>
              </table>
            </td>
          </tr>
          <tr> 
            <td> 
              <table border="0" cellpadding="2">
                <tr> 
                  <td align="right"><font color="#FFFFFF"
                    size="2" face="arial narrow"> Number of Payments </font></td>
                  <td><font color="#FFFFFF" size="2"
                    face="arial narrow"> 
                    <input type="text"
                    size="7" name="NumberOfPayments">
                    <br>
                    </font></td>
                </tr>
                <tr> 
                  <td align="right"><font color="#FFFFFF"
                    size="2" face="arial narrow">Monthly Payment $ </font></td>
                  <td><font color="#FFFFFF" size="2"
                    face="arial narrow"> 
                    <input type="text"
                   size="7" name="MonthlyPayment" id="test">
                    <br>
                    </font></td>
                </tr>
                <tr> 
                  <td align="center" colspan="2">&nbsp;</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <div align="center"></div>
      </form>  

感谢您的帮助。非常感谢所有帮助。

Answer 1

在 onclick 事件的 Monthly Payments 输入值的每三位后添加逗号的正确 JavaScript 代码是：

<script
           language="JavaScript"><!--
function CarLoanCalculator()
{
    form = document.myform
    LoanAmount= form.LoanAmount.value
    LoanAmount = LoanAmount.replace(/,/g, "");
    parseInt(LoanAmount);   
    DownPayment= "0"
    AnnualInterestRate = form.InterestRate.value/100
    Years= form.NumberOfYears.value
        MonthRate=AnnualInterestRate/12
    NumPayments=Years*12
    Prin=LoanAmount-DownPayment

    function ReplaceNumberWithCommas(yourNumber) {
    MonthPayment=Math.floor((Prin*MonthRate)/(1-Math.pow((1+MonthRate),(-1*NumPayments)))*100)/100
    yourNumber = MonthPayment
    //Seperates the components of the number
    var components = yourNumber.toString().split(".");
    //Comma-fies the first part
    components [0] = components [0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    //Combines the two sections
    return components.join(".");
    }
      //Seperates the components of the number
        form.NumberOfPayments.value=NumPayments
    form.MonthlyPayment.value=ReplaceNumberWithCommas()
    //Seperates the components of the number
}
        // --></script>

注意：代码在整洁和 cmets 方面有点乱，但 JavaScript 语法是正确的。