document.getElementById() returns null on IE9

Question

I'm working on a popup and i'm having some hard time with Internet Explorer 9. This is the piece of code that gives me trouble:

var popUp= document.getElementById('projectInfo');
popUp.style.left=(tempX-310)+'px';
popUp.style.top=(tempY-110)+'px';

In IE9 (haven't tested in prior versions), popup is null. In adition, i've tried including my .js file just before the body closing tag and wrapping my function in a "document.ready()" function but none of this worked. The same code though works perfectly in Opera, Chrome and Firefox. Does anyone know what's going on?

Note: The function is called in the body's onLoad atribute of my html.

Answer 1

IE is having some known issues with getElementById.This post may help .

1. http://webbugtrack.blogspot.com/2007/08/bug-152-getelementbyid-returns.html

2. http://www.impressivewebs.com/avoiding-problems-with-javascript-getelementbyid-method-in-internet-explorer-7/

Answer 2

Without using function it can't work

 window.onload = function() {
   var popUp= document.getElementById('projectInfo');
   popUp.style.left=(tempX-310)+'px';
   popUp.style.top=(tempY-110)+'px';
 }

Answer 3

In previous versions of IE (and apparently Chrome and Firefox), getElementById would check for an object with the given id and if it didn't find it, it would take an element with that name.

IE9 doesn't do this, so you need to make sure you have an element with id = projectInfo, not just name=projectInfo. We just discovered this throughout one of our applications. Not great.