Question

我有一个带有div和javascript文件的HTML文件，它在这样的函数中使用这个div作为变量：

<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＆gt;控制台）并修复相应的错误来发现错误

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

Answer 2

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

你可以使用jQuery

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

或vanilla JavaScript

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

解决这个问题。

Answer 3

您需要确保在脚本运行window.onload时加载文档。你在条形函数中缺少一个（）：

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

Javascript找不到我的div

3 个答案: