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

Question

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

我所做的是添加一个带有输入的表单，您可以在其中添加转换方程所需的变量。我几乎完成了它，但是当我尝试使用 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(){})()在 Stack Overflow 的代码片段中，因此 abc当onclick时函数未定义添加了处理程序。因此添加 click JavaScript 中的事件监听器也解决了这个问题。这只是为了让它在 Stack Overflow 的代码片段中运行。

您可以委托(delegate) 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>