2017-04-06 5 views
-1

私はこの作業に苦労しており、他の貴重なリソースから助けを得ることができませんでした。主な問題は、DOM形式の変数の参照です。 私はここのコード(それは、このエラーには重要ではないかもしれないと私はCSSを共有していないよ)私はJavascriptに問題があります。 "TypeError:document.forms.inputsは定義されていません"

`

<script> 
var a, b, c; 
a = document.forms["inputs"]["deg_2"].value; 
b = document.forms["inputs"]["deg_1"].value; 
c = document.forms["inputs"]["deg_0"].value; 
    var D = b^2 - 4*a*c; 

    var ans1 = (-b + sqrt(D)/2*a); 
    var ans2 = (-b - sqrt(D)/2*a); 


function result(){ 

    document.getElementById('answer1').innerHTML = ans1; 
    document.getElementById('answer2').innerHTML = ans2; 
} 
</script> 
</head> 
<body> 
    <div class = "head"> 
<h1 class = "head"> Quad Root Finder </h1> 
    </div> 
    <div class = "message"> 
<h3 class = "message"> Hello user, I am making this Quad Root Finder as one of my starting project. </h3> 
    </div> 
<div class = "derivative"> 
<form name = "inputs"> 
    <input type="text" name = "deg_2" ></input><lable for = "x^2"> x^2 + </lable> 
    <input type = "text" name = "deg_1"></input><lable for = "x"> x + </lable> 
    <input type = "text" name = "deg_0"></input><lable for = "constant"> </lable><br><br> 
    <button onclick="result()"> Find Roots </button> 
</form> 
</div> 
<p class = "answer_title"> 
Answer: 
</p> 
<div class = "answer"> 
    <h3 id = "answer1"> </h3> 
    <h3 id = "answer2"> </h3> 
</div> 
</body> 

`

+1

あなたはすべてのコードを 'result()'関数の中に入れなければなりません。 – JJJ

答えて

0

あなたがエラーを取得している理由を持っていますJavaScriptコードがHTMLページの一番上にあるからです。つまり、HTMLが解析される前に実行されます。したがって、コードが実行されると、ブラウザのDOMに関する限り要素は存在しません。質問のコメントで指摘されたよう

、あなたは今まで、ページのロード時に元の値を持つことになり、あなたのresult関数内でそれ以外ans1ans2をそのロジックのすべてを移動する必要があります。

DOMを実行前にロードできるようにするには、JavaScriptをHTMLの下部に移動することをお勧めします。

<body> 
    // All your other HTML 
    <script> 
     function result(){ 
      var a, b, c; 
      a = document.forms["inputs"]["deg_2"].value; 
      b = document.forms["inputs"]["deg_1"].value; 
      c = document.forms["inputs"]["deg_0"].value; 
      var D = b^2 - 4*a*c; 

      var ans1 = (-b + sqrt(D)/2*a); 
      var ans2 = (-b - sqrt(D)/2*a); 
      document.getElementById('answer1').innerHTML = ans1; 
      document.getElementById('answer2').innerHTML = ans2; 
     } 
    </script> 
</body> 
関連する問題