Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with links effecting a div tag toggle

    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

    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>

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    This line assumes an onclick for every link:
    Code:
    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

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    You can check for the onclick event in the link with:
    Code:
    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();
          }
        }
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •