我刚刚格式化数字以逗号显示，但现在我的计算器不起作用？

Question

I am building a calculator, which I have previously asked questions on, see previous link: Building an interest rate calculator, however it won't produce figure

I want some fields to appear with commas when entered, I found some code on here and it seems to work with the formatting however now the calculations just return NaN.

Any ideas why adding commas would stop it from working?

Here's the code I used to add the commas and the code for the calculator is on the previous link:

HTML:

    <div class="col-md-10 col-md-offset-1 form-body form-group">
                <h2 class="form-heading">Find out how much your mortgage will cost</h2>
                <div class="row text-muted">
                    <div class="col-md-5 col-md-offset-1 calc-input">
                        <h3>Purchase Price</h3>
                        <div class="input-group">
                            <span class="input-group-addon">£</span>
                            <input type="text" class="form-control comma" id="pp" placeholder="150,000" onchange="depositValue()">
                        </div>
                        <h3>Deposit</h3>
                        <div class="row text-muted">
                            <div class="col-md-4">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="percent" placeholder="10" onchange="depositValue()">
                                    <span class="input-group-addon">%</span>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="input-group">
                                    <span class="input-group-addon">£</span>
                                    <input type="text" class="form-control comma" id="dp" placeholder="15,000" onchange="depositPercent()">
                                </div>
                            </div>
                        </div>
                        <h3>Mortgage Term</h3>
                        <div class="input-group">
                            <input type="text" class="form-control" id="mt" placeholder="25">
                            <span class="input-group-addon">Years</span>
                        </div>
                        <h3>Interest Rate</h3>
                        <div class="input-group">
                            <input type="text" class="form-control" id="ir" placeholder="4">
                            <span class="input-group-addon">%</span>
                        </div>
                    </div>
                    <div class="col-md-5 text-center">
                        <h3>Estimated Monthly Payment:</h3>
                        <p id="result"></p>
                        </div>   
                </div>
                <div class="row text-muted">
                    <div class="col-md-10 col-md-offset-1 text-center">
                        <button class="btn btn-cta" onclick="calculate()">Calculate</button>
                    </div>
                </div>
            </div>

Calculator JS:

    function calculate() {
var pp = document.getElementById("pp").value;
var dp = document.getElementById("dp").value;
var mt = document.getElementById("mt").value;
var ir = document.getElementById("ir").value;
var result = document.getElementById("result");

var la = parseInt(pp.replace(/,/g, ""), 10) - parseInt(dp.replace(/,/g, ""), 10);
var intRate = (ir/100)/12;
var months = mt * 12;

var monthlyPayment = ((((la*intRate)/(1-Math.pow(1+intRate,(-1*months)))*100)/100).toFixed(2));

result.innerHTML = "£" + monthlyPayment.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    function depositValue() {
    var pp = document.getElementById("pp").value;
    var percent = document.getElementById("percent").value;
    var dp = document.getElementById("dp");

    var dpValue = (parseInt(percent.replace(/,/g, ""), 10) / 100) * parseInt(pp.replace(/,/g, ""), 10);

    dp.value = dpValue;
    }

    function depositPercent() {
    var pp = document.getElementById("pp").value;
    var dp = document.getElementById("dp").value;
    var percent = document.getElementById("percent");

    var dpPercent = (parseInt(dp.replace(/,/g, ""), 10) / parseInt(pp.replace(/,/g, ""), 10) * 100).toFixed(0);

    percent.value = dpPercent;
    }

Comma JS (in another file):

    $('input.comma').keyup(function(event) {

    // skip for arrow keys
    if(event.which >= 37 && event.which <= 40) return;

    // format number
    $(this).val(function(index, value) {
    return value
    .replace(/\D/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    ;
    });
    });

Answer 1

The moment you add the commas, it's no longer a number, but a string. When you do your calculations you'll have to account for that by stripping them out before processing.