document.getElementById將不起作用，我該如何解決這個問題？

Question

我有這個網站，將二次方程轉換爲頂點形式。

我所做的是添加一個輸入表單，您可以在其中添加轉換公式所需的變量。我幾乎完成了它，但是當我嘗試撥打getElementById的ID爲h和k時，文檔不能，因爲它是在用戶點擊提交按鈕後定義的，因此我無法在啓動時加載該功能，我的問題。

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(){})()內封閉片段堆棧溢出因此abc函數在添加onclick處理程序時未定義。因此，在JavaScript中添加一個click事件監聽器也解決了這個問題。這只是爲了使它在Stack Overflow中的代碼片段中運行。

您可以委託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>