Javascript 无法识别全局变量

关于可变范围，我有点困惑。下面的代码没有正确执行playerDetails函数-除非我在函数块中声明变量“panel”

然而，我认为如果一个变量是在函数块之外声明的，那么它就具有全局作用域，并且对所有函数块都是可见的

简言之，我可以通过将第一行移动到playerDetails函数块来让代码正常工作，我只是不明白为什么我需要这样做。任何帮助都将不胜感激

谢谢。代码如下

var panel = document.getElementById ( "panel" ) ;

function init()
{
var player1 = {name: "DJCraigo" , score: 178242 , rank: "1st"} ;
var player2 = {name: "Tohny" , score: 155522 , rank: "2nd"} ;
player1.showDetails = playerDetails ;
player2.showDetails = playerDetails ;

player2.showDetails() ;

player1.showDetails() ;
}

function playerDetails()
{
  panel.innerHTML += "Player with name " + this.name + " is ranked " + this.rank + " with a         score of " + this.score + "<br>" ;
}
document.addEventListener ( "DOMContentLoaded" , init , false ) ; 

var panel=document.getElementById（“panel”）；
函数init（）
{
var player1={姓名：“DJCraigo”，分数：178242，排名：“第一”}；
var player2={姓名：“托尼”，分数：155522，排名：“第二”}；
player1.showDetails=playerDetails；
player2.showDetails=playerDetails；
player2.showDetails（）；
player1.showDetails（）；
}
函数播放器详细信息（）
{
panel.innerHTML+=“名为“+this.name+”的玩家排名为“+this.rank+”，得分为“+this.score+”
”；
}
document.addEventListener（“DOMContentLoaded”，init，false）；

面板变量的声明/初始化行在读取时执行。DOM可能没有初始化，因此getElementById不会返回任何内容

如果希望变量是全局变量，请在执行时声明它，但在init函数中初始化（getElementById）

var panel;
function init()
{
    panel = document.getElementById ( "panel" ) ;
...

---

在您发出

getElementById（“面板”）

时，DOM可能还没有准备好。您应该像对待

init（）

函数一样，将此操作绑定到

DOMContentLoaded

。只需将JavaScript放在

标记中即可。请参阅感谢大家的帮助Frederic-我该怎么做？