Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problem Toggling content of div tags 1

Status
Not open for further replies.
dannyvince

dannyvince

Technical User
Jul 5, 2007
10
GB
I'm building a translation website and need to be able to toggle the content of div tags to show how a paragraph looks in each language.

I have used the following code, which works fine:

Code: 
<script type="text/javascript">
function makeTxt(id,txt){
var obj = document.getElementById(id);
obj.firstChild?obj.firstChild.data=txt:obj.appendChild(document.createTextNode(txt))
}
</script> 

<a onclick="makeTxt('id1','text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1')"><img src="image.jpg">
<div id="id1">text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 </div>

What i'd like to do is to have a "restore" image which restores the content to what it was in the original div tags.

Any ideas?
 
Sort by date Sort by votes
Hi

Unless you completely ignore all other browsers than Explorer, I suggest to change that expression.
Code: 
<html>
<head>
<title></title>
<script type="text/javascript">
var ori=new Array();
function makeTxt(id,txt)
{
  var obj=document.getElementById(id);
  if (!ori[id]) ori[id]=obj.innerHTML;
  obj.innerHTML=txt;
}
function reTxt(id)
{
  var obj=document.getElementById(id);
  if (ori[id]) obj.innerHTML=ori[id];
}
</script>
</head>
<body>
<a onclick="makeTxt('id1','text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1 text 1')"><img src="image.jpg"></a>
<a onclick="reTxt('id1')"><img src="image.jpg"></a>
<div id="id1">text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 text 2 </div>
</body>
</html>
The above functions are able to handle multiple [tt]div[/tt]s.

Feherke.
 
Upvote 0 Downvote
thanks for that thats great...
What would you suggest for multi browser compatibility?
 
Upvote 0 Downvote
One more thing...

Is there any way of changing and restoring all of them (if you have multiple instances on a page)? something like this:

Code: 
<html>
<head>
<title></title>
<script type="text/javascript">
var ori=new Array();
function makeTxt(id,txt)
{
  var obj=document.getElementById(id);
  if (!ori[id]) ori[id]=obj.innerHTML;
  obj.innerHTML=txt;
}
function reTxt(id)
{
  var obj=document.getElementById(id);
  if (ori[id]) obj.innerHTML=ori[id];
}
</script>
</head>
<body>
<br>
<a onclick="reTxt('id1')">restore all<img src="image.jpg"></a><br>
<a onclick="reTxt('id1')">change all<img src="image.jpg" alt=""></a><br>
<br>
<a onclick="makeTxt('id1','text 1')"><img src="image.jpg"></a>
<a onclick="reTxt('id1')"><img src="image.jpg"></a>
<div id="id1">text 2</div>

<a onclick="makeTxt('id2','text 3')"><img src="image.jpg"></a>
<a onclick="reTxt('id2')"><img src="image.jpg"></a>
<div id="id2">text 4</div>

<a onclick="makeTxt('id3','text 5')"><img src="image.jpg"></a>
<a onclick="reTxt('id3')"><img src="image.jpg"></a>
<div id="id3">text 6</div>
</body>
</html>
 
Upvote 0 Downvote
Hi

JavaScript: 
function makeAllTxt()
{
  var aa=document.getElementsByTagName('a');
  for (var i=0,al=aa.length;i<al;i++)
    if (aa[i].onclick.toString().indexOf('makeTxt')!=-1) aa[i].onclick()
}
function reAllTxt()
{
  for (id in ori) {
    var obj=document.getElementById(id);
    obj.innerHTML=ori[id];
  }
}
HTML: 
<a onclick="makeAllTxt()">change all<img src="image.jpg"></a><br>
<a onclick="reAllTxt()">restore all<img src="image.jpg"></a><br>

Feherke.
 
Upvote 0 Downvote
Works absolutely perfectly! Nice one! Many thanks!

Code: 
<html>
<head>
<title></title>
<script type="text/javascript">
var ori=new Array();
function makeTxt(id,txt)
{
  var obj=document.getElementById(id);
  if (!ori[id]) ori[id]=obj.innerHTML;
  obj.innerHTML=txt;
}
function reTxt(id)
{
  var obj=document.getElementById(id);
  if (ori[id]) obj.innerHTML=ori[id];
}

function makeAllTxt()
{
  var aa=document.getElementsByTagName('a');
  for (var i=0,al=aa.length;i<al;i++)
    if (aa[i].onclick.toString().indexOf('makeTxt')!=-1) aa[i].onclick()
}

function reAllTxt()
{
  for (id in ori) {
    var obj=document.getElementById(id);
    obj.innerHTML=ori[id];
  }
}
</script>
</head>
<body>
<a onclick="makeAllTxt()">change all<img src="image.jpg"></a><br>
<a onclick="reAllTxt()">restore all<img src="image.jpg"></a><br>
<br>
<a onclick="makeTxt('id1','text 1')"><img src="image.jpg"></a>
<a onclick="reTxt('id1')"><img src="image.jpg"></a>
<div id="id1">text 2</div>
<a onclick="makeTxt('id2','text 3')"><img src="image.jpg"></a>
<a onclick="reTxt('id2')"><img src="image.jpg"></a>
<div id="id2">text 4</div>
<a onclick="makeTxt('id3','text 5')"><img src="image.jpg"></a>
<a onclick="reTxt('id3')"><img src="image.jpg"></a>
<div id="id3">text 6</div>
</body>
</html>
 
Upvote 0 Downvote
There is another problem. If there is another link on the page (like the logo link in the code) the "change all" function doen't work...! Any ideas.

The code below simplifies what I'm trying to do on this link:
Code: 
<html>
<head>
<title></title>
<script type="text/javascript">
var ori=new Array();
function makeTxt(id,txt)
{
  var obj=document.getElementById(id);
  if (!ori[id]) ori[id]=obj.innerHTML;
  obj.innerHTML=txt;
}
function reTxt(id)
{
  var obj=document.getElementById(id);
  if (ori[id]) obj.innerHTML=ori[id];
}
function makeAllTxt()
{
  var aa=document.getElementsByTagName('a');
  for (var i=0,al=aa.length;i<al;i++)
    if (aa[i].onclick.toString().indexOf('makeTxt')!=-1) aa[i].onclick()
}
function reAllTxt()
{
  for (id in ori) {
    var obj=document.getElementById(id);
    obj.innerHTML=ori[id];
  }
}
</script>
</head>
<body>

<a href="index.html"><img src="logo.jpg" width="100" height="100"></a><br><br>

<a onClick="makeAllTxt()">change all<img src="image.jpg"></a><br>
<a onClick="reAllTxt()">restore all<img src="image.jpg"></a><br>
<br>
<a onClick="makeTxt('id1','text 1')"><img src="image.jpg"></a>
<a onClick="reTxt('id1')"><img src="image.jpg"></a>
<div id="id1">text 2</div>
<a onClick="makeTxt('id2','text 3')"><img src="image.jpg"></a>
<a onClick="reTxt('id2')"><img src="image.jpg"></a>
<div id="id2">text 4</div>
<a onClick="makeTxt('id3','text 5')"><img src="image.jpg"></a>
<a onClick="reTxt('id3')"><img src="image.jpg"></a>
<div id="id3">text 6</div>
</body>
</html>
 
Upvote 0 Downvote
Hi

Oops. Indeed.
Code: 
function makeAllTxt()
{
  var aa=document.getElementsByTagName('a');
  for (var i=0,al=aa.length;i<al;i++)
    if ([red]aa[i].onclick &&[/red] aa[i].onclick.toString().indexOf('makeTxt')!=-1) aa[i].onclick()
}

Feherke.
 
Upvote 0 Downvote
Ok i recon if you can get this sorted it should be done...

I'm not sure if this is possible but what i'd like to do is to have only the option available that will change the text instead of always having both options like in the site at the moment:
So if the paragraph was in english then the chinese button is availble and visa versa.

I attempted this by putting the first "change text" button in the original text div tags which works, but when i put the "restore" button in the change text div tag i get an error?!?

Any ideas? Thanks for helping.

Code: 
<html>
<head>
<script type="text/javascript">
var ori=new Array();
function makeTxt(id,txt)
{
  var obj=document.getElementById(id);
  if (!ori[id]) ori[id]=obj.innerHTML;
  obj.innerHTML=txt;
}
function reTxt(id)
{
  var obj=document.getElementById(id);
  if (ori[id]) obj.innerHTML=ori[id];
}

function makeAllTxt()
{
  var aa=document.getElementsByTagName('a');
  for (var i=0,al=aa.length;i<al;i++)
    if (aa[i].onclick && aa[i].onclick.toString().indexOf('makeTxt')!=-1) aa[i].onclick()
}

function reAllTxt()
{
  for (id in ori) {
    var obj=document.getElementById(id);
    obj.innerHTML=ori[id];
  }
}
</script>
</head>
<body>
<a onclick="makeAllTxt()">change all<img src="image.jpg"></a><br>
<a onclick="reAllTxt()">restore all<img src="image.jpg"></a><br><br>

<a onclick="reTxt('id1')"><img src="image.jpg"></a>
<div id="id1">original text 1<a onclick="makeTxt('id1','changed text 1')"><img src="image.jpg"></a></div>
<a onclick="makeTxt('id2','changed text 2')"><img src="image.jpg"></a>
<a onclick="reTxt('id2')"><img src="image.jpg"></a>
<div id="id2">original text 2</div>
<a onclick="makeTxt('id3','changed text 3')"><img src="image.jpg"></a>
<a onclick="reTxt('id3')"><img src="image.jpg"></a>
<div id="id3">original text 3</div>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
577
coldbohemia
coldbohemia
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
682
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
635
malpa
malpa
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
190
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top