Script not working in IE - parentNode problem?

[pgasston]

Hi,

I have a script which loops through all <area> tags of an imagemap and
changes the visibility of a hidden <div> (using MooFX for the
transition). The same script then searches each <div> to find the <a
class="close_box"> tag which toggles back to invisible.

The script works fine in FF, Opera & Safari, but the second half of the
function - find the <a> to toggle visibility again - doesn't work in
IE. Here's the relevant part of the script:

var theCloser =
document.getElementById('rep_holder').getElementsByTagName('a');
for ( i=0; i < theCloser.length; i++) {
if (theCloser.getAttribute('class') == 'close_box') {
theCloser.onclick = function() {
var theParent = this.parentNode.parentNode.getAttribute('id');
var theChange = new fx.Opacity(theParent, { duration: 500});
theChange.toggle();
return false;
}
}
}

Can anyone see why this wouldn't work in IE? Is it because of the
parentNodes?

 

[Martin Honnen]

if (theCloser.getAttribute('class') == 'close_box') {

Use the HTML DOM with
if (theCloser.className == 'close_box') {
as getAttribute is broken enough in IE to be not compatible with other
browsers.

 

[RobG]

(e-mail address removed) wrote:
[...]

Martin has answered your problem, but...

theCloser.onclick = function() {
var theParent = this.parentNode.parentNode.getAttribute('id');
var theChange = new fx.Opacity(theParent, { duration: 500}); [...]
Can anyone see why this wouldn't work in IE? Is it because of the
parentNodes?

If you are referring to the extra #text nodes that Gecko browsers
insert to retain whitespace in the markup, then no. The extra nodes
are only an issue when navigating down the tree, going upward is fine.

Note however that making your script dependent on the HTML structure is
not a good idea. It may be OK where the structure is invariant, (say
looking for the TR parent of a TD as you know that a TD's parent will
always be a TR) but with an A inside a DIV you can't be sure.

Consider using a while loop to go up the tree until you find the
element you're after.

 

[pgasston]

Many thanks! That was exactly what I was looking for.

I'd read that tip about className before, but it slipped my mind.

if (theCloser.getAttribute('class') == 'close_box') {

Use the HTML DOM with
if (theCloser.className == 'close_box') {
as getAttribute is broken enough in IE to be not compatible with other
browsers.