javascript：无法在函数中使用全局变量，无法浏览dom

Question

这里的初学者...我想念什么？

我定义了一个全局变量，它是对html元素的引用：

         var x=document.getElementById("xxx1");

然后，在函数内尝试引用该变量以浏览dom：

        x.innerHTML="dsfgfdgdf";

...行不通； 如果我在函数内部定义了变量，那么它可以工作，但是我看不到它是一个范围问题...如果我不在dom上下文中使用它们（object.property），则在函数内部使用全局变量可以正常工作

谢谢

Answer 1

是否在加载DOM之前执行了getElementById？ （您应该等待domready或onload）

您是否有可能覆盖其他函数中的值？

Answer 2

这不是范围问题。

最可能的原因是创建变量时该元素尚不存在。 您必须将用于创建变量的script元素放在要访问的元素之后，因为代码将在页面加载时运行。

另一种选择是全局声明变量，并从页面加载后运行的onload事件中对其进行设置：

<script>

var x;

function init() {
  x = document.getElementById('xxx1');
}

</script>

<body onload="init();">

Answer 3

我认为问题可能在于，如果您全局声明该变量，则在评估该行时，DOM不会完全加载，因此该元素不可访问。

当您在函数中声明该变量时，仅当您很可能已完全加载DOM时，才在调用该函数时创建该变量。

Answer 4

调用getElementById时，页面可能未完全加载。

确保在页面加载完成后创建全局变量x。 大多数库都有处理此问题的方法，例如jQuery具有“就绪”功能。 如果您不想使用任何库，则总是可以在body元素调用onload-event时创建变量。

jQuery样式：

$(function(){
    // create X here
})

机身上装风格：

<body onload="aFunctionThatCreatesYourVariable()">