2014-01-17 145 views
0

我收到的時候我召喚出btn.onClick控制檯此錯誤的無法設置屬性的「onClick」 {遺漏的類型錯誤:無法設置屬性爲null的「onClick」}未捕獲的類型錯誤:空

CODE位置:

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

回答

1

HTML文檔從上到下被加載。該腳本在加載DOM之前執行,因此在腳本執行時,頁面上不存在btnCalculate

如果您將腳本放在頁面的底部,這可以解決您的問題。

+0

對不起,因爲在這裏做菜,我在學校第一次學習這個。尊敬的,我問:「我應該把btncalculate從js的細節到HTML頁面的底部... – simpleWebGuy

+0

感謝您的幫助,這有助於我糾正代碼 – simpleWebGuy

1

在頁面完成瀏覽器解析之前,您的腳本正在執行,因此#btnCalculate元素尚不存在,因此它爲空。

解決該問題的最快方法是將腳本標記移動到身體標記的末尾,並將其放置在</body>之前。

另注:onClick不是正確的屬性,它必須是onclick而不是全部小寫。

+0

感謝這糾正了我的代碼。函數在你的標記中。謝謝你和Happy Friday – simpleWebGuy

+0

很高興幫助!如果你點擊答案左邊的複選標記,你可以選擇它作爲「正確的」答案。 – mwcz