Script not working in IE - parentNode problem?

[pgasston]

Hi,

I have a script which loops through all <areatags of an imagemap and
changes the visibility of a hidden <div(using MooFX for the
transition). The same script then searches each <divto 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 <ato toggle visibility again - doesn't work in
IE. Here's the relevant part of the script:

var theCloser =
document.getElementById('rep_holder').getElementsB yTagName('a');
for ( i=0; i < theCloser.length; i++) {
if (theCloser[i].getAttribute('class') == 'close_box') {
theCloser[i].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]

pg******@gmail.com wrote:

if (theCloser[i].getAttribute('class') == 'close_box') {

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

--

Martin Honnen
http://JavaScript.FAQTs.com/

[RobG]

pg******@gmail.com wrote:
[...]

Martin has answered your problem, but...

theCloser[i].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.

--
Rob

[pgasston]

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

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

pg******@gmail.com wrote:

if (theCloser[i].getAttribute('class') == 'close_box') {

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

--

Martin Honnen
http://JavaScript.FAQTs.com/