Javascript找不到我的div

Question

我有一个带div的HTML文件和一个使用此div作为函数的变量的javascript文件，如下所示：

<div id="foo"></div>

和JS

foo = document.getElementById("foo");
function bar() {
  foo.innerHTML = "foobar"
}

但是，当我运行bar （加载后，在控制台中）时，它说bar是未定义的，并且不会将foo.innerHTML更改为"foobar"

更新 ：加载页面后，我在控制台中调用bar() 。 我也将代码固定在那里

Answer 1

您需要将脚本更新为

function bar() {
  document.getElementById("foo").innerHTML = "foobar"
}

您的脚本有问题。 您声明函数的方式在语法上是错误的。

另外，应确保在调用函数时，该元素存在于DOM中。

可以通过打开开发人员工具（F12>控制台）并修复相应的错误来发现错误。

还要确保在</body>标记之前有<script>标记，以便JS在将所需的元素映射到DOM之前解析文档。

Answer 2

那是因为您在元素加载之前调用了脚本。

您可以使用jQuery

$(function() { /* Code goes here */ }

或香草JavaScript

window.onload = function() { /* Code goes here */ }

解决这个问题。

Answer 3

您需要确保在脚本通过window.onload运行时已加载文档。 而且您在bar函数中缺少（）：

window.onload = function(){ // we wait for the document to load
    var foo = document.getElementById("foo"); // now we are sure the div exists
    function bar() { // note the missing ()
        document.getElementById("foo").innerHTML = "foobar"
    }
}