getElementById returns null

[cssExp]

Hi,

Suppose I have the following inside a function:

document.getElementById('display_content').innerHTML = "hello";

The above works. However, when I define it like the following it says display_content is null on firefox error console.

var display_content = document.getElementById('display_content');
 
function render()
{
    display_content.innerHTML = "hello";
}

Any suggestions? when I replace display_content with document.getElementById('display_content'), it works.

[markbrown4]

Hi, make sure the html has finished loading before you run the script.

window.onload = function() {
  var display_content = document.getElementById('display_content');
}
function render() {
    display_content.innerHTML = "hello";
}

[cssExp]

It still gives the same error, but if I define the function within the onload then it works

 window.onload = function()
{

  var display_content = document.getElementById('display_content');

  function render()
  {
      display_content.innerHTML = "hello";
  }
}

Is it possible without me having to define the function within onload?

Originally Posted by markbrown4

Hi, make sure the html has finished loading before you run the script.

window.onload = function() {
  var display_content = document.getElementById('display_content');
}
function render() {
    display_content.innerHTML = "hello";
}

[felgall]

The display_content in the window.onload anonymous is defined local to that function. It no longer exists by the time the render function tries to access a global variable by the same name.

[markbrown4]

You should try to avoid using global variables too so the following is probably the best.
If functions need references to other objects just pass them as parameters.

function render() {
  var content = document.getElementById('display_content');
  display_content.innerHTML = "hello";
}

[cssExp]

defining the objects locally does the trick, thanks.