document.layers error in IE

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

ashkaan57@hotmail.com - 29 May 2005 07:17 GMT

Hi,
I am using the following code to show/hide part of an html page. It
works in Netscape and Firefox but dies in IE: "Error: document.layers
is null or not an object"

<style>
.noshow {
display: none;
}
.menu {
display: block;
}
</style>

<script language="javascript>
if (document.getElementById)
{
function getElemById(id)
{
return document.getElementById(id);
}
}
else if (document.all)
{
function getElemById(id)
{
return document.all(id);
}
}
else if (document.layers)
{
function getElemById(id)
{
return document.layers[id];
}
}

function hide(ele)
{
getElemById(ele).className = "noshow";
}

function show(ele)
{
getElemById(ele).className = "menu";
}
</script>

Then in the html part:

<a href="javascript:show('category');">Show Categories</a>

<div id="category" class="noshow">
...
...
<a href="javascript:hide('category');">Hide Categories</a>
</div>

TIA.

Reply to this Message

ashkaan57@hotmail.com - 29 May 2005 08:27 GMT

OK, I am a bit confused!! After posting this I checked and it seems
that document.layers is part of netscape 4 and document.all is for IE
4/5. I tested this using IE6, which should work with
document.getElementById. So, why is IE6 using the function related to
if (document.layers)???!!

> Hi,
> I am using the following code to show/hide part of an html page. It
[quoted text clipped - 55 lines]
>
> TIA.

Reply to this Message

Random - 29 May 2005 10:51 GMT

> OK, I am a bit confused!! After posting this I checked and it seems
> that document.layers is part of netscape 4 and document.all is for IE
[quoted text clipped - 38 lines]
> > }
> > }

...

Take a look at this:

if( true ) {
function myFunc( ) {
thing1();
}
} else if( false ) {
function myFunc( ) {
thing2();
}
}

It won't do what you expect, because function declarations in the form
of:

function identifier( ) { statements }

are parsed out before any logic is performed.

It's the same as saying:
function myFunc( ) {
thing1();
}

function myFunc( ) {
thing2();
}

And because the second declaration overwrites the first, you might as
well just say:
function myFunc( ) {
thing2();
}

Instead, consider declaring getElemById() this way:
getElemById = function( id ) {
// statements
}

---------------------------
If you rewrite it this way, it should work as you expect:

if( document.getElementById )
getElemById = function( id ) {
return document.getElementById( id );
}

else if( document.all )
getElemById = function( id ) {
return document.all[ id ];
// note that we use square brackets here
}

else if( document.layers )
getElemById = function( id ) {
return document.layers[ id ];
}

Reply to this Message

Michael Winter - 29 May 2005 13:45 GMT

>> it seems that document.layers is part of netscape 4

Amongst some others, but generally yes, and probably not worth worrying
about.

>> and document.all is for IE 4/5.

The all collection is supported by all IE versions after 4.0, as well as
other user agents. However, for the purposes of obtaining a single
element reference, its use should be restricted to IE 4 only. The
document.getElementById method is preferable.

[ashkann:]

>>> <style>

[snip]

>>> <script language="javascript>

The type attribute is required by both elements:

<style type="text/css">

<script type="text/javascript">

[snip]

> if( true ) {
> function myFunc( ) {
[quoted text clipped - 5 lines]
> }
> }

[snip]

> It's the same as saying:
> function myFunc( ) {
[quoted text clipped - 4 lines]
> thing2();
> }

No, it's not. Depending on your point of view, at best the former should
throw a syntax error, and at worst it will act like the latter.

[snip]

Mike

Signature

Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Reply to this Message

Grant Wagner - 31 May 2005 21:09 GMT

> Hi,
> I am using the following code to show/hide part of an html page. It
[quoted text clipped - 53 lines]
> <a href="javascript:hide('category');">Hide Categories</a>
> </div>

Lots of people have explained why you are seeing what you are seeing,
but I don't think anyone has given you a clear way to resolve it:

<script type="text/javascript">
var d = document;
var gEBI;
if (d.getElementById) {
gEBI = function(id) { return d.getElementById(id); }
} else if (d.all) {
gEBI = function(id) { return d.all(id); }
} else {
gEBI = function() { return { style:{} }; }
}
function hide(id) { gEBI(id).className = "noshow"; }
function show(id) { gEBI(id).className = "menu"; }
}

Because you use -gEDI- without testing what it returns a generic version
of -gEBI- that returns a new Object is required so that you can assign
a -className- property to it without causing an error.

Since assigning -className- to the object returned by
document.layers[id] doesn't do anything either, I removed that test and
have only two tests for document.getElementById and document.all.
Netscape 4 will use the generic function that returns a "fake" node.

The reason I have the generic version of the function return {
style:{} } is so you can do things like:

gEBI(id).style.display = 'none';

and it won't cause an error in Netscape 4 (it won't do anything either,
but presumably you have graceful degradation for Netscape 4 anyway).

Signature

Grant Wagner <gwagner@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / May 2005

document.layers error in IE