Cross browser DHTML, ala quirksmode

[cjl]

Hey all:

I'm stuck. I'm using the code from www.quirksmode.org for cross
browser access to HTML elements, but I'm getting a javascript error.
The relevant code:

function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}

OK -- this is straight from quirksmode, and I have seen the same or
similar code in just about every javascript library. I have the
following HTML:

<img id="right_image" src="data/1.gif" alt="right image" />

And the following css:

#right_image
{
position: absolute;
}

So, when I call:

var rightImage = new getObj('right_image');

I get an error:

"Error: document.getElementById(name) has no properties"

However, if I comment out "this.style =
document.getElementById(name).style;" from the getObj function, the
error goes away.

So, what am I doing wrong?

-CJL

 

[Yann-Erwan Perio]

"Error: document.getElementById(name) has no properties"

However, if I comment out "this.style =
document.getElementById(name).style;" from the getObj function, the
error goes away.

Try alert(document.getElementById(name)), you'll see it's undefined,
which is why looking up the style property fails miserably. To solve
this, what about calling the function *after* the HTML element is
parsed... ;-)

 

[web.dev]

Hi CJL,

This happens when the browser has yet to render that element in the web
page, or when such element with the given Id does not exist. But in
your case, it might be more probable of the first scenario.

A second item to address (this is just me being picky). On the lines
in which you do the following:

this.style = document.getElementById(name).­style;
this.style = document.all[name].style;
this.style = document.layers[name];

You can speed up execution time by reducing DOM lookups by doing the
following:

this.style = this.obj.style;

If you were able to grab the object in the previous line, then you
don't need to grab the object again to reference its style, when you
could just refer to it directly.

Hope this helps.

 

[cjl]

Hey all:

Once again, thank you for the quick and helpful replies. This
newsgroup is amazing!

I was making the mistake that both of you assumed, the javascript was
called before the HTML had been parsed. This has been fixed, and now
everything is working.

web.dev, I swiped the code wholesale from quirksmode, but I see your
point, and will make the suggested changes.

-CJL