Fatal编程技术网
  • javascript/
  • JavaScript:TypeError:document.getElementById（…）为空

JavaScript:TypeError:document.getElementById（…）为空

javascript

JavaScript:TypeError:document.getElementById（…）为空,javascript,Javascript,下面是我的代码 <html> <head> <script> var x = 5; var y = 6; var z = x + y; document.getElementById("add").innerHTML = z; </script> </head> <body> <h1>Demo</h1> <div id="demo">Additi

下面是我的代码

<html>

<head>
<script>
    var x = 5;
    var y = 6;
    var z = x + y;
    document.getElementById("add").innerHTML = z;
</script>
</head>

<body>
    <h1>Demo</h1>
<div id="demo">Addition of 5 and 6 is <span id="add"></span>
</div>

</body>

</html>
请帮助我。

更改顺序：将脚本放在元素之后，以便在调用
getElementById
时定义它

<body>
    <h1>Demo</h1>
<div id="demo">Addition of 5 and 6 is <span id="add"></span>
</div>
<script>
    var x = 5;
    var y = 6;
    var z = x + y;
    document.getElementById("add").innerHTML = z;
</script>
</body>
像这样将代码添加到onload事件

window.onload = function () {
    var x = 5;
    var y = 6;
    var z = x + y;
    document.getElementById("add").innerHTML = z;
}
演示：

因为您尝试在文档准备好使用之前调用它

更新：如果您不想等待，而将加载所有资源（图像等），则可以使用此方法

  document.onreadystatechange = function () {
    if (document.readyState === "complete") {
      ready();
    }
  }

  function ready() {
      var x = 5;
      var y = 6;
      var z = x + y;
      document.getElementById("add").innerHTML = z;
  }
演示：

如果需要常见问题解答，那么这个问题（以及回调中关于这个问题的问题）是一个很好的理由，说明为什么应该有一个常见问题解答。原因归结为：1。元素还不存在，2。根本不存在具有该ID的元素，3。大写错误（2的子集）。只需移动页面底部的
脚本
块即可

window.onload = function () {
    var x = 5;
    var y = 6;
    var z = x + y;
    document.getElementById("add").innerHTML = z;
}



  document.onreadystatechange = function () {
    if (document.readyState === "complete") {
      ready();
    }
  }

  function ready() {
      var x = 5;
      var y = 6;
      var z = x + y;
      document.getElementById("add").innerHTML = z;
  }