JavaScript: 类型错误：document.getElementById(...) 为空

Question

JavaScript: 类型错误：document.getElementById(...) 为空

3

以下是我的代码。

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

当我尝试在(span add)中显示z的值时，出现了以下错误。

 TypeError: document.getElementById(...) is null

请帮助我。

- Saurabh Shrikhande

1

只需将页面底部的“script”块移动即可。 - Saqueib

2个回答

4

将您的代码添加到onload事件中，如下所示：

像这样

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

示例：http://jsbin.com/luqeyo/1/edit?html,output

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

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

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

Demo: http://jsbin.com/luqeyo/2/edit?html,output

- Oleksandr T.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Denys Séguret · Accepted Answer

更改顺序：将脚本放在元素之后，这样在调用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>

另一种解决方案是使用jQuery的ready函数：

<script>
    $(function(){
        var x = 5;
        var y = 6;
        var z = x + y;
        $('#add').html(z); // if you use jQuery, you may as well do that
    });
</script>
</head>
<body>
    <h1>Demo</h1>
<div id="demo">Addition of 5 and 6 is <span id="add"></span>
</div>

</body>