www.webdeveloper.com
Results 1 to 2 of 2

Thread: Help with ChildNode?!

Hybrid View

  1. #1
    Join Date
    Jan 2010
    Posts
    3

    Help with ChildNode?!

    Hi, I almost have my code working however it's not working because the div's have the same id, because they are created automatically through php so I cannot name them myself. Here is my code:

    Code:
    <style>
    div{border: 1px solid black; padding: 5px;}
    </style>
    <script>
    function show(navigation)
    {
    var alli = document.getElementById('navigation').getElementsByTagName('a');
    aam.value = alli[0]
    mel.value = alli[1]
    ipc.value = alli[2]
    }
    </script>
    
    
    
    
    <div id="navigation" onClick="show()">
      <a href="http://www.google.com">Google.com</a> <br>
      <a href="http://www.yahoo.com">Yahoo.com</a> <br>
      <a href="http://www.bing.com">Bing.com</a>
    </div>
    
    <br>
    
    <div id="navigation" onClick="show()">
      <a href="http://www.jack.com">jack.com</a> <br>
      <a href="http://www.ning.com">ning.com</a> <br>
      <a href="http://www.bill.com">bill.com</a>
    </div>
    <br>
    
    <input type=text id=aam>
    <input type=text id=mel>
    <input type=text id=ipc>
    I'm trying to make it so that when I click one a div, its specific contents get transferred to the input boxes below, it's doing so, however it only works for the first div. How would I make it work for all of the divs to correspond with its own specific children(a tags)?

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    A lot of errors. id must be unique on document.
    You said:
    it's not working because the div's have the same id, because they are created automatically through php so I cannot name them myself.
    You must instruct that php to give them different id's, otherwise the generated code is wrong. But, in fact you don't need those ids, as you will see below.

    Moreover: the elements can not be referenced straight with their ids (your case aam, mel,ipc) , but on using document.getElementById(id) method. A value can not be assigned with an object, and so on. I doubt it could work in any browser.

    Here's the corrected code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function show(div){
    var allA=div.getElementsByTagName('a'), a, i=0;
    var Ids=['aam','mel','ipc'], inp;
    while(a=allA[i++]){
    inp=document.getElementById(Ids[i-1]);
    inp.value=a.href;
    }
    }
    </script>
    </head>
    <body>
    <div onclick="show(this)">
      <a href="http://www.google.com">Google.com</a> <br>
      <a href="http://www.yahoo.com">Yahoo.com</a> <br>
      <a href="http://www.bing.com">Bing.com</a>
    </div>
    
    <br>
    
    <div onclick="show(this)">
      <a href="http://www.jack.com">jack.com</a> <br>
      <a href="http://www.ning.com">ning.com</a> <br>
      <a href="http://www.bill.com">bill.com</a>
    </div>
    <br>
    <form action="">
    <input type="text" id="aam">
    <input type="text" id="mel">
    <input type="text" id="ipc">
    </form>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles