Ошибка типа uncaught: невозможно установить свойство 'onClick' для null

0

Я получаю эту ошибку, когда вызываю btn.onClick в консоли: {Uncaught TypeError: Невозможно установить свойство onClick из null}

КОД ЗДЕСЬ:

=============== 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
Теги:

2 ответа

1
Лучший ответ

Документы HTML загружаются сверху вниз. Сценарий выполняется до загрузки DOM, поэтому во время выполнения скрипта btnCalculate не существует на странице.

Если вы поместите скрипт в нижней части страницы, это должно решить вашу проблему.

  • 0
    Извините за то, что я нуб, я в школе, изучаю это впервые. С уважением я спрашиваю: «Я должен поместить: btncalculate детали из js внизу страницы html ...
  • 0
    спасибо за вашу помощь это помогло мне исправить код
1

Ваш скрипт выполняется до того, как страница закончила анализироваться браузером, поэтому элемент #btnCalculate еще не существует, поэтому он равен нулю.

Самый быстрый способ исправить это - переместить тег сценария в конец тега вашего тела, поместив его прямо перед </body>.

Другое примечание: onClick - это не правильное свойство, оно должно быть onclick вместо этого, все строчные.

  • 0
    Спасибо, это исправило мой код. Это раздражает, но удивительно, как незначительные детали позволят префектным функциям в вашей разметке. спасибо и счастливой пятницы
  • 0
    Рад, что это помогло! Если вы нажмете галочку слева от моего ответа, вы можете выбрать его как «правильный» ответ.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню