未捕获类型错误:不能设置属性“onClick”为null。

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

当我调用btn时，会得到这个错误。onClick在控制台:{未捕获的类型错误:不能设置属性'onClick'的null}

CODE HERE:

代码:

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

= = = = = = = = = = = = = = = 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==================

= = = = = = = = = = = = = = = 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

2 个解决方案

#1

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.

HTML文档是从上往下加载的。脚本在加载DOM之前执行，所以在脚本执行的时候，btnCalculate在页面上不存在。

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

如果您将脚本放在页面的底部，这将解决您的问题。

#2

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.

您的脚本在页面完成被浏览器解析之前正在执行，因此# btncount元素还不存在，因此它是空的。

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>.

最快捷的补救方法是将脚本标记移动到body标签的末尾，将其放置在之前。

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

另一个注意:onClick不是正确的属性，它必须是onClick，所有小写。

#1