document.getElementById won’t work, how do I fix this?

Question

I have this site that converts a quadratic equation to the vertex form.

What I did was add a form with inputs where you can add in the variables required to convert the equation. I am almost done with it, but when I try to call getElementById with the IDs h and k , the document can't because it was defined after the user hits the submit button, therefore I cannot load the function on startup which would have solved my problem.

 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

It was not working in the code snippet mostly because some of the tags with IDs were not defined and also because the JavaScript is automatically enclosed inside a self executing anonymous function (function(){})() in the code snippet in Stack Overflow thus the abc function was undefined when the onclick handler was added. Thus adding a click event listener in JavaScript resolved this issue as well. This was solely to make it run in the code snippet in Stack Overflow.

You can delegate the onclick event or you could embed the script inside a <script> tag and add it to the 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>