CODEWITHSUNDEEP
javascripthtml
simpleWebGuy
simpleWebGuy

Reputation: 11

Uncaught type Error: Cannot set property 'onClick' of null

I'm getting this error when I call out btn.onClick in console: {Uncaught TypeError: Cannot set property 'onClick' of null }

CODE HERE:

===============html==================

<!DOCTYPE html>
<html>
    <head>
        <title>Calculator</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">

    </head>

    <body>
        <div class="container">
        <h3 class="billboard">Wacky Expressions Assignment</h3>
            <p><b>Cost of Shoe Strings</b>:<input type="text" id="inCost"/></p>
            <p><b>Down Payment</b>:<input type="text" id="inDown"/></p>
            <p><b>APR (Intrest)</b>:<input type="text" id="inAPR"/></p>
            <p><b>Term (How long)</b>:<input type="text" id="inTime"/></p>
            <p><button id="btnCalculate">Calculate Payments</button></p>
            <p><b>Monthly Payments</b>:<span id="outMonthly"/></p>
        </div>

     <script language="JavaScript" src="js/script.js" type="text/javascript"></script>
    </body>
</html>

===============JS==================

//The Formula: c = (r * p) /  (1 - (Math.pow((1 + r), (-n))));
//@param p float Amount borrowed
//@param r interest, as a percentage
//@param n term in years
function calculateMortgage(p, r, n ) {    //setting function for mortgage calculator

    //converting this percentage to a decimal
    var r = percentToDecimal(r);

    //convert years to months
    n = yearsToMonths(n);    //parameters set for n = conversion of years to months

    //convert data with formula for obtaining monthly payments
    var pmt = (r * p) /  (1 - (Math.pow((1 + r), (-n))));

    return parseFloat(pmt.toFixed(2));

    return monthlyPayments;    //returning to variabale monthly
}

function percentToDecimal(percent) {    /
    return (percent/12) / 100; //assigning calculation for conversion of input
}

function postPayments(payment) {
    var htmlEl = document.getElementById("outMonthly");

    htmlEl.innerText = "$" + payment;
}

function yearsToMonths(year) {    //function setup for converting year to months
    return year * 12;    //assigning calculation for years to months
}

var btn = document.getElementById("btnCalculate");
btn.onclick = function calculateMortgage( p, r , n) {
    var cost = document.getElementById("inCost").value;    //declaring variables for cost
    var downPayment = document.getElementById("inDown").value;
    var interest = document.getElementById("inAPR").value;    //declaring variable for intrest
    var term = document.getElementById("inTime").value;    //declaring variable for term 

    var amountBorrowed = cost - downPayment;    //declaring varibales for amount borrowed

    var pmt = calculateMortgage(amountBorrowed, interest, term);

    postPayments(pmt);
}

//console.log(cost, downPayment, interest, term);
//console.log("R", p);    //call out log for para p
//console.log("R", r);    //call out log for para r 
//console.log("R", n);    //call out log for para n

Upvotes: 0

Views: 1853

Answers (2)

mwcz
mwcz

Reputation: 9311

Your script is being executed before the page has finished being parsed by the browser, therefore the #btnCalculate element does not exist yet, therefore it is null.

The quickest way to remedy that is to move the script tag to the end of your body tag, placing it right before the </body>.

Another note: onClick is not the correct property, it must be onclick instead, all lowercase.

Upvotes: 1

Thomas Jones
Thomas Jones

Reputation: 4962

HTML documents are loaded from the top down. The script is executing before the DOM is loaded, and so at the time the script is executing, btnCalculate doesn't exist on the page.

If you put the script at the bottom of the page, this should resolve your issue.

Upvotes: 1

Related Questions