Javascript找不到id的元素?

时间:2010-12-21 10:52:13

标签: javascript getelementbyid

<html>
<head>
    <title>Test javascript</title>

    <script type="text/javascript">
        var e = document.getElementById("db_info");
        e.innerHTML='Found you';
    </script>
</head>
<body>
    <div id="content">
        <div id="tables">

        </div>        
        <div id="db_info">
        </div>
    </div>
</body>
</html>

如果我使用alert(e);它会显示null ....显然我没有在屏幕上找到任何“找到你”。我做错了什么?

5 个答案:

答案 0 :(得分:54)

问题是您尝试在元素存在之前访问它。您需要等待页面完全加载。一种可能的方法是使用onload处理程序:

window.onload = function () {
    var e = document.getElementById("db_info");
    e.innerHTML='Found you';
};

但是,大多数常见的JavaScript库都提供了一个DOM-ready事件。这更好,因为window.onload也等待所有图像。在大多数情况下,您不需要这样做。

另一种方法是将脚本标记放在结束</body> - 标记之前,因为它前面的所有内容都是在执行时加载的。

答案 1 :(得分:1)

在关闭body标记之前,在onload事件中运行代码。 你试图找到一个你现在不存在的元素。

答案 2 :(得分:1)

浏览器如何知道何时在脚本标记内运行代码?因此,要在窗口完全加载后运行代码,

window.onload = doStuff;

function doStuff() {
    var e = document.getElementById("db_info");
    e.innerHTML='Found you';
}

另一种方法是将<script...</script>保留在结束</body>标记之前。

答案 3 :(得分:1)

在元素存在之前调用脚本。

您应该尝试以下方法之一:

  1. 将代码包装到函数中并使用body onload事件来调用它。
  2. 将脚本放在文档末尾
  3. 将defer属性用于脚本标记声明

答案 4 :(得分:0)

脚本在构建正文的DOM之前执行。将所有内容放入函数中,然后从body-element的onload调用它。