AJAX

Changing link text.

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Sep 2007

Posts: 1

Reputation: Ventrix is an unknown quantity at this point

Solved Threads: 0

Ventrix

Offline

Newbie Poster

Changing link text.

Sep 16th, 2007

Hello,

I have a link that carrys out a DHTML function within my page, and once this link is clicked, i use the following js to change the text of the link.

In an external js file

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
function exp(obj) {
  var el = document.getElementById(obj);
  el.innerHTML = 'This text has changed!';
}
function exp(obj) {
  var el = document.getElementById(obj);
  el.innerHTML = 'This text has changed!';
}

The link

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<a name="a" href="javascript:exp('a');">Click here!</a>
<a name="a" href="javascript<b></b>:exp('a');">Click here!</a>

So, once clicked, the text changes from Click here!, to This text has changed!. But i want to be able to revert to the original text, once the link is clicked again.

An example is http://demo.rockettheme.com/apr07/ The top panel 'Open Control Panel' changes and then reverts the link text on subsequent clicks.

Any help please?

•

Join Date: May 2005

Posts: 182

Reputation: alpha_foobar is an unknown quantity at this point

Solved Threads: 3

alpha_foobar alpha_foobar is offline

Offline

Junior Poster

Re: Changing link text.

Sep 17th, 2007

Hi,
If you want to do this with a lot of different links and for it to work well in IE and Firefox, then you might want to change it a little... alternatively, I would use an ID attribute instead of a name... Anyhow, take a look at this:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>		
	<script type="text/javascript">
		function exp(obj) {
			if(obj.oldText){
				obj.innerHTML = obj.oldText;
				obj.oldText = null;
			} else {
				obj.oldText = obj.innerHTML;
				obj.innerHTML = 'This text has changed!';
			}
		}
	</script>
	<body>
		<a href="#" onclick="javascript:exp(this);">Click here 1!</a><br/>
		<a href="#" onclick="javascript:exp(this);">Click here 2!</a><br/>
	</body>
</html>
<html>		
	<script type="text/javascript">
		function exp(obj) {
			if(obj.oldText){
				obj.innerHTML = obj.oldText;
				obj.oldText = null;
			} else {
				obj.oldText = obj.innerHTML;
				obj.innerHTML = 'This text has changed!';
			}
		}
	</script>
	<body>
		<a href="#" onclick="javascript<b></b>:exp(this);">Click here 1!</a><br/>
		<a href="#" onclick="javascript<b></b>:exp(this);">Click here 2!</a><br/>
	</body>
</html>