CODEWITHSUNDEEP
javascriptreplace
user3758368
user3758368

Reputation: 3

Replace text, and replace it back

I am using this code to replace text on a page when a user clicks the link. I would like a way to replace it back to the initial text using another link within the replaced text, without having to reload the page. I tried simply adding the same script within the replaced text and switching 'place' and 'rep_place' but it didn't work. Any ideas? I am sort of a novice at coding so thanks for any advice. 

<div id="place">
Initial text here
<SCRIPT LANGUAGE="JavaScript">
  function replaceContentInContainer(target,source) {
    document.getElementById(target).innerHTML  = document.getElementById(source).innerHTML;
  }
 </script>
     <div class="text" onClick="replaceContentInContainer('place', 'rep_place')">
      <u><a href="#">Link to replace text</a></u></div></div>
<div id="replacements" style="display:none">
  <span id="rep_place">
 Replacement text here
</div></span>

Upvotes: 0

Views: 329

Answers (4)

Paul Gorton
Paul Gorton

Reputation: 712

How's this? I store the initial content in an element of an array called initialContent.

<div id="place">
Initial text here [<a href="#" onClick="replaceContentInContainer('place', 'rep_place')">replace</a>]
</div>

<div id="replacements" style="display:none">
    <span id="rep_place">
    Replacement text here [<a href="#" onclick="showInitialContent('place')">revert</a>]
    </span>
</div>

<SCRIPT LANGUAGE="JavaScript">
var initialContent = [];

function replaceContentInContainer(target,source) {
    initialContent[target] = document.getElementById(target).innerHTML;
    document.getElementById(target).innerHTML  = document.getElementById(source).innerHTML;
}

function showInitialContent(target) {
    document.getElementById(target).innerHTML = initialContent[target];
}
</SCRIPT>

Upvotes: 0

craigdfrench
craigdfrench

Reputation: 970

The div tags were mixed up and wiping out your link after running it. I just worked with your code and showed how you could switch. 

<div id="place">
Initial text here
</div>
<SCRIPT LANGUAGE="JavaScript">
  function replaceContentInContainer(target,source) {
    document.getElementById(target).innerHTML  = 

 document.getElementById(source).innerHTML;
  }
  </script>
     <div class="text" onClick="replaceContentInContainer('place', 'rep_place')">
  <u><a href="#">Link to replace text</a></u></div>
 <div class="text" onClick="replaceContentInContainer('place', 'original_place')">
  <u><a href="#">Link to restore text</a></u></div>

<div id="replacements" style="display:none">
  <span id="rep_place">
Replacement text here
</span>
<span id="original_place">
Initial text here
</span>
</div>

Upvotes: 0

bitoiu
bitoiu

Reputation: 7474

Working example: http://jsbin.com/huxodire/1/

The main changes I did were the following:

I used textContent instead of innerHTML because the later replaces the whole DOM contents and that includes removing your link to replace the text. There was no way to generate that event afterwards.

I closed the first div or else all the text would be removed with the innerText including the text that works as a link.

You said you wanted to replace back to the original text, so I used a variable to hold the last value only if this existed.

Hope this helps, let me know if you need more assistance.

Upvotes: 0

David
David

Reputation: 218808

Where do you store the original text? Consider what you're doing in some simpler code...

a = 123;
b = 456;
a = b;
// now how do you get the original value of "a"?

You need to store that value somewhere:

a = 123;
b = 456;
temp = a;
a = b;
// to reset "a", set it to "temp"

So in your case, you need to store that content somewhere. It looks like the "source" is a hidden element, it can just as easily hold the replaced value. That way values are swapped, not just copied. Something like this:

function replaceContentInContainer(target,source) {
    var temp = document.getElementById(target).innerHTML;
    document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
    document.getElementById(source).innerHTML = temp;
}

So replace them you simply call:

replaceContentInContainer('place', 'rep_place')

Then to swap them back:

replaceContentInContainer('rep_place', 'place')

Note that this will replace the contents of the "source" element until they're swapped back again. From the current code we can't know if that will affect anything else on the page. If so, you might use a different element to store the original values. That could get complex quickly if you have a lot of values that you need to store.

Upvotes: 1

Related Questions