Global Variable not recognised Javascript

Question

I am a little confused regarding varable scope. The below code does not execute the playerDetails function properly - UNLESS I declare the variable 'panel' inside the function block.

However - I thought if a variable was declared outside of a function block it therefore has global scope - and is visible to all function blocks.

In short - I can get the code to work by moving the first line into the playerDetails function block - I just don't see why I should need to do that. Any help would be much appreciated.

Thanks. Code below ;

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 ) ;

The DOM is probably not yet ready at the time you issue getElementById("panel"). You should bind this operation to DOMContentLoaded the same way you do for the init() function. — Frédéric Hamidi
– Frédéric Hamidi, Commented Oct 15, 2013 at 7:49

MC ND · Accepted Answer · 2013-10-15 08:00:59Z

1

The line with the declaration / initialization of panel variable gets executed just when it is read. And the DOM is probably not initialized, so, getElementById does not return anything.

If you want your variable to be global, declare it as you are doing, but initialize (getElementById) inside the init function.

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

answered Oct 15, 2013 at 8:00

MC ND

71.1k8 gold badges95 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Global Variable not recognised Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related