document.getElementsByTagName conflicts in functions

[pepijn]

I am loading 3 functions which have to loop through the page looking for anchor tags like this:

function one(){
var e = document.getElementsByTagName("a");
for (var i=0;i<e.length;i++){
e[i].onclick = function(){
if(this.className == "change"){
this.style.display = "block";
}
}
}
}
function two(){
var e = document.getElementsByTagName("a");
for (var i=0;i<e.length;i++){
e[i].onclick = function(){
if(this.className == "add"){
this.style.display = "block";
}
}
}
}

The problem is that the functions will not execute because they all have the onclick event on the anchors. I can prevent this by using getElementById within the function, but that is not always possible. How can i get this to work right so that the onclick is only executed on the right anchor

[Arno_Adams]

Hi pepijn,

You mean something like this:

function one() {
var e = document.getElementsByTagName("a");
for (var i=0;i<e.length;i++) {
e[i].onclick = function(){
if(this.className == "change"){
this.style.display = "block";
}
else if(this.className == "add"){
this.style.display = "none";
}
}
}
}

HTH, AA

[pepijn]

Hi,

this looks ok!
thanks.