...

View Full Version : Problem with links effecting a div tag toggle



dannyvince
07-07-2007, 08:39 PM
I'm trying to get a bit of code working for a translation website i'm working on at the moment. You can view the page i'm trying to fix here: http://www.ace-translation.com/ the idea is that the flags next to each paragraph toggle the language of that paragraph (which works fine).

The flags at the top of the page i'm trying to make control all of the paragraphs in the page. The "restore" i.e. the english flag works, but the chinese flag "change all" doesn't. I've worked out it's because it doesn't work when a link is on the same page... The "a" tag for the image link seems to effect the "makeAllTxt" function.

I'm not very good at coding and was wondering if there was a simple way of making the "makeAllTxt" function work when other links are present.

The code below simplifies the page, have a go and you'll see what i mean...

Help please :)


<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>

rwedge
07-08-2007, 12:19 AM
This line assumes an onclick for every link:
if (aa[i].onclick.toString().indexOf('makeTxt')!=-1) aa[i].onclick()but the first link for the logo does not have an onclick event so it throws an error

dannyvince
07-08-2007, 09:14 AM
Is there a way of distinguishing between the regular links and the ones with the toggle? So that the function only toggle the correct links?

rwedge
07-08-2007, 07:53 PM
You can check for the onclick event in the link with:

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum