combine getElementsByTagName AND getElementbyId

[webaster]

function goBack(){

if (document.getElementById)

x = document.getElementById('gallery');

else if (document.all)
// IE4
x = document.all['gallery'];

x.onclick = replacer;
}

when gallery is the id of

<ul id="gallery">
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>

IS it possible to Iterate on all a tags of gallery and perform the onclick event

[webaster]

iterating with getElementsByTagName('a')

[Bernard Marx]

Yes.

var allLinks = document.getElementById('gallery').getElementsByTagName('a');

Then iterate allLinks.

[webaster]

Is this the correct syntax to iterate over all a tags of element ul with id gallery?

function Iterator(){

if (document.getElementsByTagName)
x = document.getElementsByTagName('a');
//backwards compatibility
else if (document.all)
x = document.all.tags('a');

if (document.getElementById)

y = document.getElementById('gallery');

else if (document.all)
// IE4
y = document.all['gallery'];

for (var i=0;i<x.length;i++) {

y.x[i].onclick = replacer;
}
}

[Bernard Marx]

Hmm. Not quite. There's a little confusion going on there
- the variable, x, holds an object reference, and cant be used like this:
(y doesn't have a 'x' property)
y.x[i]

(For supporting browsers) every element has an 'all' collection.

BTW Collections only need to be accessed via square brackets when the property is
dynamic.

document.all['boo'] <--> document.all.boo

This should do it:

function Iterator()
{
    var galleryLinks; // use local var
    if(document.getElementById) // thus getElementsByTagName support assumed
        galleryLinks = document.getElementById('gallery').getElementsByTagName('a');
    else if(document.all)
        galleryLinks = document.all.gallery.all.tags('a');
    else return // reject NS4 etc
    for (var i=0;i<galleryLinks.length;i++)
        galleryLinks[i].onclick = replacer;
}

[webaster]

what if all href are like this:

somepage.html#1
somepage.html#2
somepage.html#3
somepage.html#4

...

can you use replace method to iterate

in combination with getElementsByTagName AND getElementbyId

[Bernard Marx]

You'll have to be a little more specific.

[webaster]

The code

<ul id="gallery">
<li> <a href="orginal_size.html#1" title=""><img src="thumbs/01.jpg" width="150" height="150"></a> </li>
<li> <a href="orginal_size.html#2" title="">
<img src="thumbs/02.jpg" width="150" height="150"></a>
</li>
<li> <img src="thumbs/01.jpg" width="150" height="150"></a></li>
<li> <img src="thumbs/01.jpg" width="150" height="150"></a></li>
</ul>

I want to achieve that with

function replacer(){
var isIe = (navigator.appName == "Microsoft Internet Explorer");
var isOpera = (/opera/i.test(navigator.userAgent));
if(isOpera ¦¦ isIe) {


//here I want that everytime the thumb is clicked it gets replaced with //the corresponding url of original photo-page by means of iteration

location.replace("orginal_size.html#1");
}}

function Iterator()
{
var galleryLinks; // use local var
if(document.getElementById) // thus getElementsByTagName support assumed
galleryLinks = document.getElementById('gallery').getElementsByTagName('a');
else if(document.all)
galleryLinks = document.all.gallery.all.tags('a');
else return // reject NS4 etc
for (var i=0;i<galleryLinks.length;i++)
galleryLinks[i].onclick = replacer;

}

[webaster]

errata

<ul id="gallery">
<li>
<a href="orginal_size.html#1" title="">
<img src="thumbs/01.jpg" width="150" height="150"></a> </li>
<li>
<a href="orginal_size.html#2" title="">
<img src="thumbs/02.jpg" width="150" height="150"></a>
</li>
<li>
<a href="orginal_size.html#3" title="">
<img src="thumbs/03.jpg" width="150" height="150"></a>
</li>
<li>
<a href="orginal_size.html#4" title="">
<img src="thumbs/04.jpg" width="150" height="150"></a>
</li>
</ul>

[Bernard Marx]

I'm feeling a bit slow today, and don't really understand this.