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 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy Help for newbie!

    Hi guys

    I'm an old designer but not better at JavaScript than copy/paste and I haven't found enough examples to make this happen.

    I need a JavaScript to get all the named anchors in the page and generate a paragraph (or div, or ul list) with all the links corresponding to the found named anchors.

    I can edit the code myself to add them different ID numbers or name them as the anchor was.

    Thank you very much!.

    If you have any question about Photoshop, Illustrator or In-Design, you can pm me.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Try this:-

    Code:
    <body onload = "findanc()">
    
    <a name = "Link1" href = "http://www.google.com">Click Here</a>
    <a name = "Link2" href = "http://www.codingforums.com">Click Here</a>
    <a name = "Link3" href = "http://www.javascriptkit.com">Click Here</a>
    <br><br>
    <div id = "theList"></div>
    
    <script type = "text/javascript">
    function findanc() {
    var len =  document.anchors.length;
    for (var i = 0; i < len; i++) {
    alert(document.anchors[i].href);   // for testing
    document.getElementById("theList").innerHTML += document.anchors[i].href + "<br>"
    }
    }
    </script>

    Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. Why not edit it to "Capture all named anchors" or something meaningful.
    Last edited by Philip M; 06-19-2009 at 07:29 PM.

  • Users who have thanked Philip M for this post:

    sergiozambrano (06-21-2009)

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Solved

    Thank you. It's exactly what I did tonight. Someone said it would only work with names, not id… and that's why I was looking for a workaround.

    I tried anyway and worked (in Firefox at least)
    Thanks anyway.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    To get *all* the anchors, they don't need EITHER name or id. It's only when you want to get a specific one that you need a name with the anchors collection or an id with getElementById.

    But the anchors collection always includes all of them, and you can always access an element of a collection by its ordinal number.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Old Pedant View Post
    To get *all* the anchors, they don't need EITHER name or id. It's only when you want to get a specific one that you need a name with the anchors collection or an id with getElementById.
    I am sorry to contradict my learned friend , but anchors must have a name (not an id) to function as such and to be accessed by document.anchors[]. An anchor is a term used to define a hyperlink destination inside a document and the HTML anchor element <a> is used to define both (external) hyperlinks and anchors.

    Links can be accessed without a name.

    Examples:-

    Code:
    <body onload = "findanc()">
    
    <a href = "http://www.google.com">Click Here</a>
    <a href = "http://www.codingforums.com">Click Here</a>
    <a href = "http://www.javascriptkit.com">Click Here</a>
    <br><br>
    <div id = "theList"></div>
    
    <script type = "text/javascript">
    function findanc() {
    var len =  document.anchors.length;
    for (var i = 0; i < len; i++) {
    alert(document.anchors[i].href);   // for testing
    document.getElementById("theList").innerHTML += document.anchors[i].href + "<br>"
    }
    }
    </script>
    Above does not work as anchors are not named.

    Code:
    <body onload = "findlinks()">
    
    <a href = "http://www.google.com">Click Here</a>
    <a href = "http://www.codingforums.com">Click Here</a>
    <a href = "http://www.javascriptkit.com">Click Here</a>
    <br><br>
    <div id = "theList"></div>
    
    <script type = "text/javascript">
    function findlinks() {
    var len =  document.links.length;
    for (var i = 0; i < len; i++) {
    alert(document.links[i].href);   // for testing
    document.getElementById("theList").innerHTML += document.links[i].href + "<br>"
    }
    }
    </script>
    Above works as links need not be named (although they may be).

    In short, you can access <a> objects with a name attribute defined (= anchor or link from an object) with document.anchors[], and those with an href attribute (= link to an object) with document[links]. Access to both objects can of course be obtained also though DOM methods such as document.getElementById().
    Last edited by Philip M; 06-22-2009 at 08:42 AM. Reason: Improve clarity


  •  

    Posting Permissions

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