Member Avatar for Ventrix

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

function exp(obj) {
  var el = document.getElementById(obj);
  el.innerHTML = 'This text has changed!';
}

The link

<a name="a" href="javascript: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?

  • 2 Contributors
  • 1 Reply
  • 151 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by alpha_foobar
Member Avatar for alpha_foobar

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:

<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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.