PDA

Click to See Complete Forum and Search --> : Javascript - Change display text of Hyperlink? How?

quantass
February 1st, 2005, 08:33 AM
I am looking to find out if there is a way in javascript to change the display text of a hyperlink...for example,

if my hyperlink is <a href="http://what.com">My Text</a> then with javascript i want to change it to <a href="http://what.com">NEW TEXT</a>

How do i do this?
visualAd
February 1st, 2005, 01:12 PM
I have made a couple of functions which find the first text nod in betwwen the <a> tags and allow you to replace it.

<html>
<head>
<script type="text/javascript">
<!--

function findTextNode(element)
{
var num = element.childNodes.length;

for (var count = 0; count < num; count++)
{
var currentNode = element.childNodes[count];

if (currentNode.nodeType == 3) /* its a text node */
{
return currentNode;
}
else if (currentNode.nodeType == 1) /* its an element node */
{
currentNode = findTextNode(currentNode);
if (! (currentNode == null))
{
return currentNode;
}
}
}

return null;
}

/* searches for the first text node and replaces it */
function replaceLinkText(newText, anchor)
{
if (anchor.childNodes)
{
var textNode = findTextNode(anchor);

if (! (textNode == null))
{
textNode.nodeValue = newText;
}
}
}

function getLinkText(anchor)
{
if (anchor.childNodes)
{
var textNode = findTextNode(anchor);

if (! (textNode == null))
{
return textNode.nodeValue;
}
}
}


//-->
</script>
</head>
<body>
<a id="link" href="text.html"
onmouseover="replaceLinkText(getLinkText(this).toUpperCase(), this)"
onmouseout="replaceLinkText(getLinkText(this).toLowerCase(), this)"><b><i>hello</i></b></a>
</body>
</html>
Dr. Script
February 1st, 2005, 03:05 PM
This solution is a tad shorter: <script type="text/javascript">

function repTxt(e,v) {
var o = e.childNodes[0]
while (o.childNodes.length > 0) {
o = o.childNodes[0]
}
o.nodeValue=v;
}

</script>

<a href="#" title="Scroll for a message ..." onmouseover="repTxt(this,'HI!')"
onmouseout="repTxt(this,'Text 1')"><em><strong>Text 1</storng></em></a>It works with formatting, but try it out first ... It might produce some unexpecte dresults depending on what the text is.

Dr. Script
visualAd
February 1st, 2005, 05:41 PM
This solution is a tad shorter: <script type="text/javascript">

function repTxt(e,v) {
var o = e.childNodes[0]
while (o.childNodes.length > 0) {
o = o.childNodes[0]
}
o.nodeValue=v;
}

</script>

<a href="#" title="Scroll for a message ..." onmouseover="repTxt(this,'HI!')"
onmouseout="repTxt(this,'Text 1')"><em><strong>Text 1</storng></em></a>It works with formatting, but try it out first ... It might produce some unexpecte dresults depending on what the text is.

Dr. Script
Nice :thumb:

Ignore mine, use his. ;) I tihnk you should still check the node type though instead of checking for child nodes. Becuase an image tag codesn't have child nodes.
Dr. Script
February 1st, 2005, 07:27 PM
Thanks ;) I was going to implement the nodeType as you did ... but it would be my conclusion that unless the code is incorrectly nested (<b><u>text</b></u>) or if only some of the code was styled (<strong>Go to <em>my</em> site</strong>) the errors would occur (and of course using them on non textual elements). That was the reason I made a note that the result may be wrong.

Also missed a couple of ;s ... trying to get back into doing that since I get hundreds of php errors from forgetting them.

Dr. Script
twenger26
June 22nd, 2006, 02:32 PM
Or you could just do this:

document.getElementById("idname").innerHTML = "newtext";
PeejAvery
June 22nd, 2006, 04:05 PM
@twenger26: This post is 1.5 years old. Please do not waste posts covering such old material. Especially since this is your only post.
Dr. Script
June 22nd, 2006, 05:13 PM
@twenger26: This post is 1.5 years old. Please do not waste posts covering such old material. Especially since this is your only post.
Thank you. I was going to say that I don't remember writing that code.
I don't know if deleting these posts will move it back, so oh, well.
michaelmotes
April 30th, 2011, 04:03 PM
4 years later, I found twenger26's post useful. Maybe the InnerHTML property just didn't exist in 2005, but it probably did and that is probably the reason for the rudeness to twenger26, he embarrassed the moderator. At any rate, +karma for twenger26.