replace()

[Schmoopy]

Hi, I'm trying to get the replace() method to work for me - it is working, but not exactly how I want it to.

I want the replace method to run on mouseover, as a substitute for Firefox's content feature, so it will work on different browsers.

I have it working, but at the moment when I mouseover it's going to a new page, instead of just replacing the text that's already there, here's my code:

<script type="text/javascript">
function changeText(){
var str="continue reading";
document.write(str.replace(/continue reading/, "continue reading..."));
}
</script>

<a href="guides-maintenance-f3.html" onmouseover="changeText();">continue reading</a>

Hope you can help a beginner out,

Thanks,

Jack

[boogyman]

<script type="text/javascript">
var el = document.getElementById('guides-maintenance');
el.onmouseover = function() {
     el.nodeValue = el.replace(/continue reading/, 'continue reading...');
}
</script>
<a href="guides-maintenance-f3.html" id="guides-maintenance">continue reading</a>

[Twey]

Instant memory leak, just add pants DOM implementation. Also, it's the nodeValue of the text node inside the element that you want, and, at the point where that script runs, the element doesn't yet exist.

This isn't actually a problem with replace() at all: the problem is your use of document.write(). In fact you don't even need replace():

<a href="guides-maintenance-f3.html" id="guides-maintenance">continue reading</a>
<script type="text/javascript">
  document.getElementById("guides-maintenance").onmouseover = function() {
    this.firstChild.nodeValue += "...";
  };
</script>

[Schmoopy]

Firstly, thanks very much for the help guys, and using Twey's code works, but 2 problems still need to be sorted.

I want it to remove the dots on mouseout, and also, the first time you mouse over it, it doesn't work, only on the second mouseover does it start adding dots, hope you can help,

Thanks,

Jack

[Twey]

<a href="guides-maintenance-f3.html" id="guides-maintenance">continue reading</a>
<script type="text/javascript">
  var e = document.getElementById("guides-maintenance");

  e.onmouseover = e.onmouseout = (function(other) {
    return function() {
      var e = this.firstChild,
          v = e.nodeValue;
      e.nodeValue = other;
      other = v;
    };
  })("continue reading...");

  e = null;
</script>

[Schmoopy]

Hey, thanks again, but it's now saying "continue reading" on mouseover, and "continue reading...", on mouse out.

So like that, but just the other way round

Thanks,

Jack.

[Twey]

Peculiar, shouldn't do that... but anyway, you can just swap the strings over.

[Schmoopy]

Yea, I've done that, only thing now is it, with it that way, when the page first loads it says "continue reading..." and then after I mouseover once it starts working. Only thing is, I don't want it to say "continue reading..." on page load, know how to do this?

Thanks,

Jack.

[Twey]

I must confess, I'm at a loss as to why such a thing could be occurring. Have you any other scripts on the page that could be causing the issue?

[Schmoopy]

Well, I did put your script inside a function, so I could use it on more than one mouseover event, but I didn't think that would change anything, only other scripts I have on the page is one for a drop down menu from DD, and one I made for tabbed content. =/