innerhtml replace problem

[NetworkGhost]

Got a problem Im trying to work through. I have 2 separate functions for the opening and closing of all images. I am trying to change the -/+ to match on the on the individual a tags when I use the all function. Clicking ion the indiviudal links is works find. When I try the link to close or open all the innerhtml is not changing. Help is appreciated.

<script type="text/javascript">
function hide(individualImage) {
	var objID = "individualImage"
if (individualImage != '') {
             var hide = [document.getElementById(individualImage)]
	     var objID= "link_" + individualImage
	     var head = document.getElementById(objID)
}
	for (i=0; i<hide.length; i++) {
      	if (hide[i].style.display == 'none') {
         	hide[i].style.display = 'inline'
	 	head.innerHTML = head.innerHTML.replace("[+] Show Image","[-] Hide Image")	
                 
    	} else {
        	hide[i].style.display = 'none'
		head.innerHTML = head.innerHTML.replace("[-] Hide Image","[+] Show Image")
	}

	}

    

}

function all_open(imageGroup) {
	var objID = "grouplink"
if (imageGroup != '') {
             var hide = document.getElementsByName(imageGroup);
	     
}
    	for (i=0; i<hide.length; i++) {
      	if (hide[i].style.display == 'none') {
         	hide[i].style.display = 'inline'
		hide[i].innerHTML = hide[i].innerHTML.replace("[+] Show Image","[-] Hide Image")
	}

	}

    

}


function all_close(imageGroup) {
	var objID = "grouplink"
if (imageGroup != '') {
             var hide = document.getElementsByName(imageGroup);
	     
}
    	for (i=0; i<hide.length; i++) {
      	if (hide[i].style.display == 'inline') {
         	hide[i].style.display = 'none'
		hide[i].innerHTML = hide[i].innerHTML.replace("[-] Hide Image","[+] Show Image")
	}

	}

    

}

</script>









<a onclick="all_open('a');" id="grouplink">Show Images <font color="red">[ASDM]</font></a> | <a onclick="all_close('a');" id="grouplink">Hide Images <font color="red">[ASDM]</font></a>
<br>


This is Image 1:<br>
<hr>
<a onclick="hide('a1');" id="link_a1">[+] Show Image</a> 
<br>
<img style="display: none" name="a" id="a1" src="datetime.bmp" border="0">
<br>
This is Image 2:<br>
<hr>
<br>
<a onclick="hide('a2');" id="link_a2">[+] Show Image</a>
<br>
<img style="display: none" name="a" id="a2" src="datetime.bmp" border="0">

Free Firewall/Network/Systems Support-

http://firewalls.ath.cx

 

[BillyRayPreachersSon]

Unless you use a RegExp, the String object's "replace" method only replaces the first occurrence of a string, AFAIK.

To get around this, use a RegExp, and specify the "global" switch ("/g") at the end.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[NetworkGhost]

Ok. I see why now. Is there a way to get a list of IDs with a wildcard?

For example. If I want to get a list of all tags with getElementbyID but I want to match all IDs that have "link_a*". I s there a way to match that wildcard?

<a onclick="hide('a1');" id="link_a1">[+] Show Image</a>
<a onclick="hide('a1');" id="link_a2">[+] Show Image</a>
<a onclick="hide('a1');" id="link_a3">[+] Show Image</a>

[document.getElementById(individualImage)]

Free Firewall/Network/Systems Support-

http://firewalls.ath.cx

 

[BillyRayPreachersSon]

I guess I mis-understood your problem!

You could use my "getElementsByClassName" function (see the FAQs for this forum) and give each a className...

Or you could get all anchors within the parent container, e.g.:

document.getElementById('parentId').getElementsByTagName('a')

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[NetworkGhost]

I was able to work it into the existing code. Thanks for the help anyways.

<script type="text/javascript">
function hide(individualImage) {
	var objID = "individualImage"
if (individualImage != '') {
             var hide = [document.getElementById(individualImage)]
	     var objID= "link_" + individualImage
	     var head = document.getElementById(objID)
}
	for (i=0; i<hide.length; i++) {
      	if (hide[i].style.display == 'none') {
         	hide[i].style.display = 'inline'
	 	head.innerHTML = head.innerHTML.replace("[+] Show Image","[-] Hide Image")	
                 
    	} else {
        	hide[i].style.display = 'none'
		head.innerHTML = head.innerHTML.replace("[-] Hide Image","[+] Show Image")
	}

	}

    

}

function all_open(imageGroup) {
	var objID = "grouplink"
if (imageGroup != '') {
             var hide = document.getElementsByName(imageGroup);
	    
}
    	for (i=0; i<hide.length; i++) {
      	if (hide[i].style.display == 'none') {
         	hide[i].style.display = 'inline'
		var linkid = 'link_a' + (i + 1)
		var head = document.getElementById(linkid)
		head.innerHTML = head.innerHTML.replace("[+] Show Image","[-] Hide Image")
	}

	}

    

}


function all_close(imageGroup) {
	var objID = "grouplink"
if (imageGroup != '') {
             var hide = document.getElementsByName(imageGroup);
	     
}
    	for (i=0; i<hide.length; i++) {
      	if (hide[i].style.display == 'inline') {
         	hide[i].style.display = 'none'
		var linkid = 'link_a' + (i + 1)
		var head = document.getElementById(linkid)
		head.innerHTML = head.innerHTML.replace("[-] Hide Image","[+] Show Image")
	}

	}

    

}

</script>









<a onclick="all_open('a');" id="grouplink">Show Images <font color="red">[ASDM]</font></a> | <a onclick="all_close('a');" id="grouplink">Hide Images <font color="red">[ASDM]</font></a>
<br>


This is Image 1:<br>
<hr>
<a onclick="hide('a1');" id="link_a1">[+] Show Image</a> 
<br>
<img style="display: none" name="a" id="a1" src="datetime.bmp" border="0">
<br>
This is Image 2:<br>
<hr>
<br>
<a onclick="hide('a2');" id="link_a2">[+] Show Image</a>
<br>
<img style="display: none" name="a" id="a2" src="datetime.bmp" border="0">

Free Firewall/Network/Systems Support-

http://firewalls.ath.cx