document.getElementByIdは機能しません。どうすれば修正できますか？

Question

私は、2次方程式を頂点形式に変換するこのサイトを持っています。

私が行ったことは、式を変換するのに必要な変数を追加できる入力をフォームに追加することでした。私はほぼ完了していますが、ID hとkのgetElementByIdを呼び出そうとすると、ユーザーが送信ボタンを押した後にドキュメントが定義されていないため、ドキュメントを作成できません。私の問題。これは、コードスニペットで働いていませんでした

function abc(a, b, c) { 
 
    var a_el = document.getElementById('a'); 
 
    var b_el = document.getElementById('b'); 
 
    var c_el = document.getElementById('c'); 
 
    var av = a_el.value; 
 
    var bv = b_el.value; 
 
    var cv = c_el.value; 
 
    console.log(av); 
 
    console.log(bv); 
 
    console.log(cv); 
 
    var h = (-1 * bv)/(2 * av); 
 
    console.log(h); 
 
    var k = (av * (Math.pow(h, 2))) + (bv * h) + cv; 
 
    console.log(k); 
 
    document.getElementById("av").innerHTML = av; 
 
    document.getElementById("bv").innerHTML = bv; 
 
    document.getElementById("cv").innerHTML = cv; 
 
    document.getElementById("h").innerHTML = h; 
 
    document.getElementById("k").innerHTML = k; 
 
}

<form> 
 
    <div class="form-group"> 
 
    <label>a:</label> 
 
    <input type="text" class="form-control" id="a"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label>b:</label> 
 
    <input type="text" class="form-control" id="b"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label>c:</label> 
 
    <input type="text" class="form-control" id="c"> 
 
    </div> 
 
    <input type="button" class="btn btn-default" name="submit" value="Submit" onclick="abc();"></input> 
 
</form> 
 
<math xmlns="http://www.w3.org/1998/Math/MathML"> 
 
    <mi>f</mi> 
 
    <mo>(</mo> 
 
    <mi>x</mi> 
 
    <mo>)</mo> 
 
    <mo>=</mo> 
 
    <mn id="av"></mn> 
 
    <msup> 
 
    <mrow> 
 
     <mo>(</mo> 
 
     <mi>x</mi> 
 
     <mo>-</mo> 
 
     <mn id="h"></mn> 
 
     <mo>)</mo> 
 
    </mrow> 
 
    <mrow> 
 
     <mn>2</mn> 
 
    </mrow> 
 
    </msup> 
 
    <mo>+</mo> 
 
    <mn id="k"></mn> 
 
    <math> 
 

 
    </div> 
 
    <div class="pull-right"> 
 
     <img src="quad.png" class="img-rounded pull-right thumbnail"> 
 
    </div> 
 
    </div> 
 
    </body>

Answer 1

IDを持つタグの一部が定義されていなかった主な理由ともJavaScriptが自動的にコードに匿名関数(function(){})()を実行し、自己の内部に封入されているため、スニペットのスタックオーバーフローしたがって、onclickハンドラが追加されたときにabc関数が定義されていませんでした。したがって、JavaScriptでclickイベントリスナーを追加すると、この問題も解決されました。これは、スタックオーバーフローのコードスニペットで実行させることのみでした。

onclickイベントを委任するか、スクリプトを<script>タグ内に埋め込んでHTMLに追加することができます。

(function(){ 
 
    function abc() { 
 
    var a_el = document.getElementById('a'); 
 
    var b_el = document.getElementById('b'); 
 
    var c_el = document.getElementById('c'); 
 
    var av = a_el.value; 
 
    var bv = b_el.value; 
 
    var cv = c_el.value; 
 
    console.log(av); 
 
    console.log(bv); 
 
    console.log(cv); 
 
    var h = (-1 * bv)/(2 * av); 
 
    console.log(h); 
 
    var k = (av * (Math.pow(h, 2))) + (bv * h) + cv; 
 
    console.log(k); 
 
    document.getElementById("av").innerHTML = av; 
 
    document.getElementById("h").innerHTML = h; 
 
    document.getElementById("k").innerHTML = k; 
 
    } 
 
document.getElementById("submit").addEventListener("click",function(){ 
 
    abc(); 
 
}); 
 
})();

<form> 
 
       <div class="form-group"> 
 
        <label>a:</label> 
 
        <input type="text" class="form-control" id="a"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label>b:</label> 
 
        <input type="text" class="form-control" id="b"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label>c:</label> 
 
        <input type="text" class="form-control" id="c"> 
 
       </div> 
 
       <input type="button" class="btn btn-default" name="submit"  value="Submit" id="submit"></input> 
 
      </form> 
 
      <math xmlns="http://www.w3.org/1998/Math/MathML"> 
 
       <mi>f</mi> 
 
       <mo>(</mo> 
 
       <mi>x</mi> 
 
       <mo>)</mo> 
 
       <mo>=</mo> 
 
       <mn id="av"></mn> 
 
       <msup> 
 
        <mrow> 
 
         <mo>(</mo> 
 
         <mi>x</mi> 
 
         <mo>-</mo> 
 
         <mn id="h"></mn> 
 
         <mo>)</mo> 
 
        </mrow> 
 
        <mrow> 
 
         <mn>2</mn> 
 
        </mrow> 
 
       </msup> 
 
       <mo>+</mo> 
 
       <mi id="k"></mi> 
 
       <math> 
 

 
    </div> 
 
    <div class="pull-right"> 
 
     <img src="quad.png" class="img-rounded pull-right thumbnail"> 
 
    </div> 
 
</div> 
 
</body>