Changing link text.

Expand Post »

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

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

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?

Similar Threads

Getting rid off the border round link images in HTML and CSS
Link Popularity in Search Engine Optimization
Random image with text and link in JavaScript / DHTML / AJAX
Open In New Window Php in PHP

Ventrix

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Sep 2007

Permalink

Sep 17th, 2007

Re: Changing link text.

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:

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>

alpha_foobar

Reputation Points: 20

Solved Threads: 5

Junior Poster

Offline

182 posts
since May 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: "Must visit from" javascript wont work in IE...

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Showing Chat Msgs without reloading

DaniWeb Message

Cancel Changes

User Name
Password