Building an interest rate calculator, however it w

Question

I am building trying to build a calculator that calculates a monthly payment based on an interest rate when clicking on a button, I'm using basic javascript bootstrap. I have already been through some answers and questions ironed out some bugs but my calculator still won't produce a figure. Could someone help?

The HTML:

    <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" id="pp" placeholder="150,000">
                        </div>
                    </div>
                    <div class="col-md-5 calc-input">
                        <h3>Deposit</h3>
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="10">
                            <span class="input-group-addon">%</span>
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">£</span>
                            <input type="text" class="form-control" id="dp" placeholder="15,000">
                        </div>
                    </div>
                </div>
                <div class="row text-muted">
                    <div class="col-md-5 col-md-offset-1">
                        <div class="input-group">
                            <input type="text" class="form-control" id="mt" placeholder="25">
                            <span class="input-group-addon">Years</span>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="input-group">
                            <input type="text" class="form-control" id="ir" placeholder="4">
                            <span class="input-group-addon">%</span>
                        </div>
                    </div>
                </div>
                <div class="row text-muted">
                    <div class="col-md-10 col-md-offset-1 text-center">
                        <button type="submit" class="btn btn-cta" onclick="calculate()">Calculate</button>
                        <h3>Estimated Monthly Payment:</h3>
                        <p id="result"></p>
                    </div>
                </div>

This is the 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 = pp - dp;
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;}

Answer 1

Just remove () while calling document.getElementById("pp").value() as

var pp = document.getElementById("pp").value;
  var dp = document.getElementById("dp").value;
  var mt = document.getElementById("mt").value;
  var ir = document.getElementById("ir").value;

value is not a function. Here is a link to a working plunker