Checking if an object exists

[frankiehots]

I am using the code from chapter 7 in the Javascript Anthology to do some popups. It works very nicely except for the fact that on pages where the object that it is looking for doesn't exist, I get error messages(I include the JavaScript on every page). Everything is ok with the page, but I would rather not get the error messages.

In IE6 I get:
Error: 'document.getElementById(...)' is null or not an object

In Firefox I get:
Error: document.getElementById("big") has no properties

Here is the Javascript I am using:

  addLoadListener(init);
  
  function init()
  {
  	document.getElementById('big').onclick = function()
  		{
  		var biggie = makePopup(this.href, 600, 450, 'scroll');
  		return biggie.closed;
  		};
  	return true;
  }
  	
  function makePopup(url, width, height, overflow)
  {
  	if (width > 640) { width = 640; }
  	if (height > 480) { height = 480; }
  
  	if (overflow == '' || !/^(scroll|resize|both)$/.test(overflow))
  	{
  		overflow = 'both';
  	}
  	var win = window.open(url, '', 'width=' + width + ',height=' + height + ',scrollbars=' + (/^(scroll|both)$/.test(overflow) ? 'yes' : 'no') + ',resizable=' + (/^(resize|both)$/.test(overflow) ? 'yes' : 'no') + ',status=yes,toolbar=no,menubar=no,location=no');
  	return win;
  }
  
  function addLoadListener(fn)
  {
  	if (typeof window.addEventListener != 'undefined')
  	{
  		window.addEventListener('load', fn, false);
  	}
  	else if (typeof document.addEventListener != 'undefined')
  	{
  		document.addEventListener('load', fn, false);
  	}
  	else if (typeof window.attachEvent != 'undefined')
  	{
  		window.attachEvent('onload', fn);
  	}
  	else
  	{
  		var oldfn = window.onload;
  		if (typeof window.onload != 'function')
  		{
  			window.onload = fn;
  		}
  		else
  		{
  			window.onload = function()
  			{
  				oldfn();
  				fn();
  			};
  		}
  	}
  }

On the pages where I use it, the HTML with the object is as follows:

  <a href="/images/small-image.jpg" id="big">
  <img src="/images/big-image.jpg" /></a>

Is there an appropriate way to check for the existence of the object, so I can avoid the errors when is not there?

I tried putting all of the javascript inside of the following code, but then the popups no longer worked:

 if (document.getElementById('big')) {
 // popup code here
 }

[yacka]

var widget = document.getElementById(...);

if(widget != null)
{
//do stuff
}

[frankiehots]

var widget = document.getElementById(...);
if(widget != null)
{
//do stuff
}

I also tried that previously. Once I do that, the popup no longer works although it seems like it should.

Any other suggestions?

[yacka]

If you're wrapping the popup code inside a null check and it's not doing anything, then obviously the element was not found at the time the code was executing. Put an else{alert("was null");} after to confirm. If it's null then either there is no element with the required Id or the code is running before the element has been parsed by the browser.