Issues with IE and Loops

[akvbroek]

Ok, so I have a very long hierarchical list that expands and collapses. To make the maintenance easier, I wrote some javascript to do the following:

1) Add the id content# where # starts at 0 and increases by 1 for each UL tag that will later be used to expand and collapse parts of the list. [function addid]

2) Add a href to the expand and collapse toggle javascript to all the links that are used to expand and collapse the list. [function addid]

3) [function collapse] Works the button that will collapse the entire list.

4) [function expand] Works the button that will expand the entire list.

5) [function toggle] Works all of the links that expand and collapse parts of the list.

Here is a URL to my test site so you can see what I am talking about:

http://test.lib.lsu.edu/gov/

Here are the javascript functions for the page:

function addid() {
	var g = document.getElementsByName('treebranch');
	for(var i=0; i<g.length; i++) { g[i].id = 'content' + i; };

	var a = document.getElementsByName('treelink');
	for(var i=0; i<a.length; i++) {a[i].href = 'javascript:toggle(\'content' + i + '\')'; };
}

function collapse() {

var i=0;
var g = document.getElementsByTagName('ul');
for (var i=0; i<g.length; i++) {
	document.getElementById('content'+i).style.display = 'none';	
	}
}

function expand() {

var i=0;
var g = document.getElementsByTagName('ul');
for (var i=0; i<g.length; i++) {
	document.getElementById('content'+i).style.display = 'block';	
	}
}


function toggle(list){ 
var listElementStyle=document.getElementById(list).style; 
if (listElementStyle.display=="block"){ 
listElementStyle.display="none"; 
 }
else{ listElementStyle.display="block"; 
 } 
}

Now, this works perfectly and without errors in Chrome, Opera, Firefox and Safari. It does not work in IE. IE appears to be doing function addid ok, but nothing else works. It only gives the ambiguous error that an object was expected.

So, anyone more talented at this then me willing to give it a shot??

THANKS!!

 

[preachie]

Hi,

the issue occurs because you are doing a getElementsByName on the <ul> tag which has no name attribute by spec (<ul> only has the attributes compact and type) and also the name 'name' attribute is no universal attribute like id.
That's why IE is ignoring those tags and won't add the needed id attribute.

So you have to rewrite the addid function to run in IE properly. Maybe you get all <ul> tags with getElementsByTagName and check for a name attribute? Maybe there are better solutions... I don't know yet

But maybe that helps already

 

[feherke]

Hi

I would say, change those invalid [tt]name[/tt] attributes to [tt]class[/tt]. Then take a look at thread216-1534478 where we discussed about [tt]getElementsByClassName()[/tt] and alternatives.

Feherke.

http://rootshell.be/~feherke/

 

[akvbroek]

Thanks for all the help, I thought it might be something like that. I ended up just removing the other UL on the page and making them paragraphs so that the only ULs on the page were those I wanted to edit then used getElementByTagName.