IE Error: 'parentNode' is null or not an object

[webdeveloper]

Without showing any code, I thought maybe somebody already knows what
the error message in the title generally means?

But in short, a menu is supposed to display by setting its inline style
attribute to: display="none" vs 'display="block" upon an onclick of an
"<a>" element. That link ("<a>") element is accessed via DOM by using
something like "this.parentNode.childNodes[2].style.display="none", or
"block" to display a menu below it.
The code works in Firefox, and the menu shows up & hides, but IE6 gives
this error, despite that it's supposed to support the 'parentNode'
property. What could it be?

-Help's appreciated.

[RobG]

webdeveloper wrote:

Without showing any code, I thought maybe somebody already knows what
the error message in the title generally means?

But in short, a menu is supposed to display by setting its inline style
attribute to: display="none" vs 'display="block" upon an onclick of an
"<a>" element. That link ("<a>") element is accessed via DOM by using
something like "this.parentNode.childNodes[2].style.display="none", or
"block" to display a menu below it.
The code works in Firefox, and the menu shows up & hides, but IE6 gives
this error, despite that it's supposed to support the 'parentNode'
property. What could it be?

If the onclick event was attached using attachEvent, then likely in IE
the function's this value is the global/window object, and not the
element. In Gecko et al, presuming you've used addEventListener, it
refers to the element.

--
Rob

[ASM]

webdeveloper a écrit :

The code works in Firefox, and the menu shows up & hides, but IE6 gives
this error, despite that it's supposed to support the 'parentNode'
property. What could it be?

I don't know about IE (Win)
but all examples bellow work fine in my browsers.

Your method :

<li><a href="11.htm" onclick="
var submenu = this.parentNode.childNodes[2].style;
submenu.display = submenu.display==''? 'none' : '';
return false;
">page 11</a>
<ul>
<li><a href="11a.htm">page 11-a</a></li>
<li><a href="11b.htm">page 11-b</a></li>
</ul>
</li>

My method :

<li><a href="11.htm" onclick="
var submenu = this.parentNode.getElementsByTagName('ul')[0].style;
submenu.display = submenu.display==''? 'none' : '';
return false;
">page 11</a>
<ul>
<li><a href="11a.htm">page 11-a</a></li>
<li><a href="11b.htm">page 11-b</a></li>
</ul>
</li>

Much more complicated :

<li><a href="11.htm" onclick="
var parentMenu = this.parentNode;
while(parentMenu.tagName.toLowerCase()!=('li'))
parentMenu += parentNode;
var submenu = parentMenu.childNodes;
for(var i=0; i<submenu.length; i++)
if(submenu[i].tagName &&
submenu[i].tagName.toLowerCase()=='ul') {
submenu = submenu[i].style
submenu.display = submenu.display==''? 'none' : '';
}
return false;
">page 11</a>
<ul>
<li><a href="11a.htm">page 11-a</a></li>
<li><a href="11b.htm">page 11-b</a></li>
</ul>
</li>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date

[webdeveloper]

Well, thanks; that gives a clue that the code might be correct, at
least. Although some 80% won't be able to use it until I can figure why
IE gives the darn error instead of obeying the DOM. I might repost
(with the code) if I can't figure out a solution.

Thanks

I don't know about IE (Win)
but all examples bellow work fine in my browsers.

Your method :

<li><a href="11.htm" onclick="
var submenu = this.parentNode.childNodes[2].style;
submenu.display = submenu.display==''? 'none' : '';
return false;
">page 11</a>
<ul>
<li><a href="11a.htm">page 11-a</a></li>
<li><a href="11b.htm">page 11-b</a></li>
</ul>
</li>

My method :

<li><a href="11.htm" onclick="
var submenu = this.parentNode.getElementsByTagName('ul')[0].style;
submenu.display = submenu.display==''? 'none' : '';
return false;
">page 11</a>
<ul>
<li><a href="11a.htm">page 11-a</a></li>
<li><a href="11b.htm">page 11-b</a></li>
</ul>
</li>

Much more complicated :

<li><a href="11.htm" onclick="
var parentMenu = this.parentNode;
while(parentMenu.tagName.toLowerCase()!=('li'))
parentMenu += parentNode;
var submenu = parentMenu.childNodes;
for(var i=0; i<submenu.length; i++)
if(submenu[i].tagName &&
submenu[i].tagName.toLowerCase()=='ul') {
submenu = submenu[i].style
submenu.display = submenu.display==''? 'none' : '';
}
return false;
">page 11</a>
<ul>
<li><a href="11a.htm">page 11-a</a></li>
<li><a href="11b.htm">page 11-b</a></li>
</ul>
</li>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date

[David Golightly]

webdeveloper wrote:

Well, thanks; that gives a clue that the code might be correct, at
least. Although some 80% won't be able to use it until I can figure why
IE gives the darn error instead of obeying the DOM. I might repost
(with the code) if I can't figure out a solution.

It's because in IE this attribute is named "parent" instead of
"parentNode". You have to use code like:

var parent = node.parentNode || node.parent;

[David Golightly]

webdeveloper wrote:

Well, thanks; that gives a clue that the code might be correct, at
least. Although some 80% won't be able to use it until I can figure why
IE gives the darn error instead of obeying the DOM. I might repost
(with the code) if I can't figure out a solution.

It's because in IE this attribute is named "parent" instead of
"parentNode". You have to use code like:

var parent = node.parentNode || node.parent;

[David Golightly]

It's because in IE this attribute is named "parent" instead of
"parentNode". You have to use code like:

var parent = node.parentNode || node.parent;

I meant, it's called "parentElement" instead of "parentNode". My
mistake. However, it appears IE also redundantly supports parentNode,
so unless there's some advantage I'm not aware of there's no reason to
use parentElement.

I'm going to bed now.

[webdeveloper]

It seems that the problem was when refering to the onclick element
itself as document.links.name made it unworkable in IE. When changed
into document.getElementById("id"); it started to work, although with
another issue that I'll describe later.

enjoy the dreams:)

David Golightly wrote:

It's because in IE this attribute is named "parent" instead of
"parentNode". You have to use code like:

var parent = node.parentNode || node.parent;

I meant, it's called "parentElement" instead of "parentNode". My
mistake. However, it appears IE also redundantly supports parentNode,
so unless there's some advantage I'm not aware of there's no reason to
use parentElement.

I'm going to bed now.