2017-01-26 7 views
-4

私はMortgage calculatorを作ろうとしました。しかし、私は何が問題なのか分からないので、うまくいきません。あなたは私に気づくことができますか?ここ私のHTMLコードではjavacriptが動作しません

は、HTML

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
 
    <title>Mortgage calculator</title> 
 
    
 
    <link rel="stylesheet" href="styles.css" /> 
 
    <script src="assignment1.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <header> 
 
     <h1> 
 
     Mortgage calculator 
 
     </h1> 
 
    </header> 
 

 
    <article> 
 
     <h2><br></h2> 
 
     <form> 
 
     \t \t <fieldset> 
 
     \t \t <label> 
 
     \t \t Mortgage Amount: $ 
 
      \t <input type="number" id="MA" name="MA" required> 
 
\t \t \t </label> 
 

 
     \t \t <label> 
 
     \t \t Down Payment Option: 
 
     \t \t <input name="pickone" type="radio" id="5" onclick="document.getElementById('amor').value = '25';" required>5% 
 
     \t \t <input name="pickone" type="radio" id="10" onclick="document.getElementById('amor').value = '25';" required>10% 
 
     \t \t <input name="pickone" type="radio" id="15" onclick="document.getElementById('amor').value = '25';" required>15% 
 
     \t \t <input name="pickone" type="radio" id="20" onclick="document.getElementById('amor').value = '30';" required>20% 
 
     \t \t </label>  \t 
 
     \t \t \t 
 
     \t \t <label> 
 
     \t \t Down Payment: $ 
 
     \t \t \t <input type="number" id="DP" name="DP" required> 
 
    \t \t \t </label> 
 
    \t \t \t 
 
     \t \t <label> 
 
     \t \t Amortization: 
 
     \t \t \t <input type="text" id="amor" name="amor" required> years 
 
     \t \t </label> 
 
     
 
     \t \t <label> 
 
     \t \t Interest Rate: 
 
     \t \t \t <input type="number" id="IR" name="IR" required>% 
 
     \t \t </label> 
 
     \t 
 
\t \t \t <button type="button" id="button">Calculate</button> 
 

 
\t \t \t <label> 
 
\t \t \t Result: 
 
\t \t \t \t <input type="number" name="Result" id="Result"> 
 
\t \t \t </label> 
 
\t \t \t 
 
\t \t \t </fieldset> 
 
\t \t \t </form> 
 
    </article> \t 
 
</body> 
 
</html>

、ここでは私のコードで私のassignment1.jsは、HELのため

function calculate() { 
 
    \t \t var mortamount = document.getElementById("MA").value; 
 
    \t \t var downpayment = document.getElementById("DP").value; 
 
    \t \t var amortization = document.getElementById("amor").value; 
 
    \t \t var interest = document.getElementById("IR").value; 
 
    \t \t 
 
    \t 
 
    \t \t var p = mortamount - downpayment; 
 
    \t \t var n = amortization * 12; 
 
    \t \t var r = interest/100/12; 
 
    \t \t var 1R = 1 + r; 
 
    \t \t 
 
    \t \t 
 
    \t \t var top = r * p * Math.pow(1r,n); 
 
    \t \t var bot = Math.pow(1r,n) - 1; 
 
    \t \t 
 
    \t \t var mpay = top/bot; 
 
    \t \t 
 
    \t \t document.getElementById("Result").value = mpay; 
 
\t } 
 
\t document.getElementById("button"). 
 
\t addEventListener("click", calculate, false);

おかげファイルでありますping :)

+0

どこが壊れていますか?何を試しましたか? – Ju66ernaut

+0

あなたのjavascriptがロードされ、DOMがロード開始される前に 'document.getElementById(" button ")'を見つけようとしています。 –

+1

'それは動作しません。デバッグ101:ブラウザの開発者ツールコンソールでエラーを確認してください –

答えて

1

開発者コンソールでエラーを確認してください... var 1R、変数名は数字で始めることはできません。

0

私はあなたのコードを実行し、11行1Rはいくつかの問題を引き起こしているようです。変数名はnumberで始めるべきではありません。 (1Rと1Rを持っているので、最初に変数名をクリアする必要があると思います。)そして、他の人がコメントしたように、javascriptファイルが最初にロードされ、まだロードされていないボタンを探しています。だからあなたはあなたのjsファイルに以下のようなものを置く必要があります。

document.addEventListener('DOMContentLoaded',() => { 
// your code goes here 
} 
関連する問題