getElementsByTagName help please

Discussion in 'Javascript' started by goldtech, Mar 18, 2011.

  1. goldtech

    goldtech Guest

    Hi,

    Learning JS and have problem and I'll list the js file and the html
    file below. The alert(links.length); shows up as 0, so somethings not
    working. Help appreciated. Thanks:

    js file start:

    window.onload = prepareLinks();
    function prepareLinks() {
    alert('Inside function prepareLinks');
    var links = document.getElementsByTagName('a');
    alert(links.length);
    for (var i=0; i<links.length; i++) {
    if (links.classname == "popup") {
    links.onclick = function() {
    popUp(this.getAttribute("href"));
    return false;
    }
    }
    }
    }

    function popUp(winURL) {
    window.open(winURL,"popup","width=320,height=480");
    }

    js file end.

    Html file:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
    TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html;
    charset=utf-8" />
    <script type="text/javascript" src="scripts/showPic2.js"></script>

    </head>
    <body>

    <a href="http://www.yahoo.com/" class="popup">Test1</a>
    <a href="http://www.bing.com/" class="popup">Test2</a>

    </body>
    </html>
    goldtech, Mar 18, 2011
    #1
    1. Advertising

  2. goldtech

    RobG Guest

    On Mar 18, 11:42 am, goldtech <> wrote:
    > Hi,
    >
    > Learning JS and have problem and I'll list the js file and the html
    > file below.  The alert(links.length); shows up as 0, so somethings not
    > working. Help appreciated. Thanks:
    >
    > js file start:
    >
    > window.onload = prepareLinks();


    That will assign the result of running prepareLinks to the
    window.onload property, I think you mean to assign a reference, so:

    window.onload = prepareLinks;


    > function prepareLinks() {
    >     alert('Inside function prepareLinks');
    >     var links = document.getElementsByTagName('a');


    There is a document.links collection that is all the links in the
    document. Note that A elements aren't necessarily links, they might be
    anchors, and that AREA elements can be links too:

    <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7068919 >


    >     alert(links.length);
    >     for (var i=0; i<links.length; i++) {
    >         if (links.classname == "popup") {


    Javascript is case sensitive, the property you seek is "className",
    note capitalisation.

    >             links.onclick = function() {
    >                 popUp(this.getAttribute("href"));


    Do not use getAttribute, access the property directly. While it is OK
    here, there are numerous quirks with get/setAttribute in other places
    so it's best to just avoid them altogether in HTML documents. So:

    popUp(this.href);


    >                 return false;
    >             }


    That will create a function for each link. It is more efficient to
    include a single "showInWindow" function and add the listener as a
    reference, e.g.

    function showInWindow(){
    popUp(this.href);
    return false;
    }

    function prepareLinks() {
    var links;
    var links = document.links;

    for (var i=0, iLen=links.length; i<iLen; i++) {
    link = links;

    if (link.className == "popup") {

    // Add reference to function
    link.onclick = showInWindow;
    }
    }
    }

    And just use HTML 4.01 strict for documents, there's no point using
    XHTML on the web unless you have a specific need.


    --
    Rob
    RobG, Mar 18, 2011
    #2
    1. Advertising

  3. goldtech

    RobG Guest

    On Mar 18, 1:01 pm, RobG <> wrote:
    [...]
    >   function prepareLinks() {
    >     var links;


    Ooops:

    var link;


    --
    Rob
    RobG, Mar 18, 2011
    #3
  4. On Thu, 17 Mar 2011 18:42:26 -0700, goldtech wrote:

    > window.onload = prepareLinks();


    > <body>


    Instead of assigning the onload attribute of the window DOM element to
    the value returned by the prepareLinks() function, I would use the onload
    attribute of the body element like this:

    <body onload="prepareLinks();">

    You should probably also wrap your content in a block element, i.e. put a
    <p></p> round the <a></a> elements.

    Rgds

    Denis McMahon
    Denis McMahon, Mar 18, 2011
    #4
  5. goldtech

    goldtech Guest

    Just want to thank you and the other posters for the help! The JS
    works now and I learned a lot from your posts.
    goldtech, Mar 18, 2011
    #5
  6. Denis McMahon wrote:

    > On Thu, 17 Mar 2011 18:42:26 -0700, goldtech wrote:
    >> window.onload = prepareLinks();
    >>
    >> <body>

    >
    > Instead of assigning the onload attribute of the window DOM element […]


    The proper term is "the DOM _object_ referred to by `window'". `window'
    does _not_ refer to an element as it is understood in the DOM, it does not
    refer to an object that implements the (HTML)Element interface (but one
    implementing the AbstractView interface instead.)

    > You should probably also wrap your content in a block element, i.e. put a
    > <p></p> round the <a></a> elements.


    Since a single link does not constitute a paragraph, the `div' element
    should be used instead.


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
    Thomas 'PointedEars' Lahn, Mar 18, 2011
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?Sm9l?=

    SelectNodes vs. GetElementsByTagName

    =?Utf-8?B?Sm9l?=, Nov 2, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    41,109
    =?Utf-8?B?Sm9l?=
    Nov 2, 2005
  2. mynamehere
    Replies:
    0
    Views:
    434
    mynamehere
    Dec 14, 2003
  3. Danny
    Replies:
    1
    Views:
    407
    wooks
    Jul 23, 2004
  4. Ragnar Heil
    Replies:
    5
    Views:
    7,497
    Ragnar Heil
    Apr 27, 2005
  5. KK
    Replies:
    2
    Views:
    500
    Big Brian
    Oct 14, 2003
Loading...

Share This Page