468,780 Members | 2,346 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,780 developers. It's quick & easy.

document.layers error in IE

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.

Jul 23 '05 #1
4 3482
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)???!!

as*******@hotmail.com wrote:
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.


Jul 23 '05 #2


as*******@hotmail.com wrote:
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)???!!

as*******@hotmail.com wrote:
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];
}
}


....
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 ];
}

Jul 23 '05 #3
On 29/05/2005 10:51, Random wrote:
as*******@hotmail.com wrote:
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( ) {
thing1();
}
} else if( false ) {
function myFunc( ) {
thing2();
}
}
[snip]
It's the same as saying:
function myFunc( ) {
thing1();
}

function myFunc( ) {
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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #4
<as*******@hotmail.com> wrote in message
news:11**********************@g14g2000cwa.googlegr oups.com...
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>


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).

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Chris Leonard | last post: by
6 posts views Thread by David List | last post: by
12 posts views Thread by Kepler | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.