document.getElementById不起作用，我该如何解决这个问题？

Question

我有这个网站将二次方程式转换为顶点形式。

我所做的是添加一个带有输入的表单，您可以在其中添加转换等式所需的变量。我差不多完成了它，但是当我尝试使用ID getElementById和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自动包含在Stack中的代码片段中的自执行匿名函数(function(){})()中溢出因此在添加abc处理程序时未定义onclick函数。因此，在JavaScript中添加click事件侦听器也解决了这个问题。这只是为了让它在Stack Overflow的代码片段中运行。

您可以委派onclick事件，也可以将脚本嵌入<script>标记中并将其添加到HTML中。

＆＃13;

＆＃13;

(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();
});
})();

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;