document.layers error in IE

[ashkaan57]

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.

 

[ashkaan57]

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)???!!

 

[Random]

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

 

[Michael Winter]

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

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:]

[snip]

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

 

[Grant Wagner]

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