can't retrieve content from <span> inside a <th>

Discussion in 'Javascript' started by lcplben, Dec 3, 2009.

  1. lcplben

    lcplben Guest

    Hello everyone --

    The problem page is http://sellmycalls.com/no-hdrtext.html and the
    problem is at lines 111-137.

    The function getColHdrText (line 124) wants to retrieve the column-
    header text from the second of three <span>s in the <th>. I thought
    that if I only got to the <span>, I could easily access the innerHTML
    just as slick as slick. It should be a five-minute task at most, but
    I've been working on it for a couple of hours now with no joy.

    What am I doing wrong, please?

    Thanks!

    -- ben
     
    lcplben, Dec 3, 2009
    #1
    1. Advertising

  2. lcplben wrote:

    > The problem page is http://sellmycalls.com/no-hdrtext.html and the
    > problem is at lines 111-137.
    >
    > The function getColHdrText (line 124) wants to retrieve the column-
    > header text from the second of three <span>s in the <th>. I thought
    > that if I only got to the <span>, I could easily access the innerHTML
    > just as slick as slick. It should be a five-minute task at most, but
    > I've been working on it for a couple of hours now with no joy.
    >
    > What am I doing wrong, please?


    The relevant code is (you want to post this next time):

    /* Line 69 below */
    function getElementsByClass ( theClass, node, tag ) {
    var classElements = new Array();
    if ( node == null )
    node = document;
    if ( tag == null )
    tag = '*';
    elems = node.getElementsByTagName( tag );
    var elemsLen = elems.length;
    var pattern = new RegExp("(^|\\s)"+theClass+"(\\s|$)");
    for (i = 0, j = 0; i < elemsLen; i++) {
    if ( pattern.test(elems.className) ) {
    classElements[j] = elems;
    j++;
    }
    }
    return classElements;
    }

    /* Line 111 below */
    /* from this <th>, I want to retrieve the word "Call" from the second
    <span>,
    the <span class='chtxt'...>Call</span>

    <th class="cal_option_symbol" style="color:rgb(204, 0, 51);">
    <span class='chimg'><img src='http://www.sellmycalls.com/pics/blu-mins.jpg'
    alt='hide column' title='hide column'
    onclick="return columnHideShowByImg(this,'Call');"></span>
    <span class='chtxt' title="symbol of this call option"
    style="font-weight:bold;"
    onClick="return selectColumnAsFilter(this);">Call</span>
    <span class='chtri'><img src='http://www.sellmycalls.com/pics/asc.jpg'
    alt='ascending sort' title='ascending sort'
    onclick="return columnToggleSortOrder(this);"></span>
    </th>
    */
    // enter here with 'col' = the <th> element
    function getColHdrText( col ) {
    var ch, s;
    ch = getElementsByClass( 'chtxt', col, 'SPAN' );

    // Firebug tells me here that ch == the 'chtxt' element, so
    // I figure I should be able to just retrieve innerHTML from
    // that element, right?

    s = ch.innerHTML; // but none of these work so I'm
    s = ch.innerText; // missing something crucial.
    s = ch.textContent; // what is that something?
    s = ch.value;
    return (s && s != 'undefined') ? s : 'nfg' ;
    }

    If you have a closer look at the getElementsByClass() function that you are
    calling, starting with its name and going on with the loop inside, you can
    see that it returns an array of element object references. Therefore, you
    are accessing the Array instance instead of the element object. That Array
    instance has neither property that you tried to read from.

    Firebug indicates that `ch' stores an Array instance reference by displaying
    brackets in the console. You must have missed that. You could access the
    first element of the array with `ch[0]'.

    BTW, the getElementsByClass() function here is error-prone for several
    reasons; search the archives for further information and better
    alternatives.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Dec 4, 2009
    #2
    1. Advertising

  3. lcplben

    David Mark Guest

    On Dec 3, 11:28 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > lcplben wrote:
    > > The problem page ishttp://sellmycalls.com/no-hdrtext.htmland the
    > > problem is at lines 111-137.

    >
    > > The function getColHdrText (line 124) wants to retrieve the column-
    > > header text from the second of three <span>s in the <th>. I thought
    > > that if I only got to the <span>, I could easily access the innerHTML
    > > just as slick as slick. It should be a five-minute task at most, but
    > > I've been working on it for a couple of hours now with no joy.

    >
    > > What am I doing wrong, please?

    >
    > The relevant code is (you want to post this next time):
    >
    > /* Line 69 below */
    > function getElementsByClass ( theClass, node, tag ) {
    >         var classElements = new Array();
    >         if ( node == null )
    >                 node = document;
    >         if ( tag == null )
    >                 tag = '*';
    >         elems = node.getElementsByTagName( tag );
    >         var elemsLen = elems.length;
    >         var pattern = new RegExp("(^|\\s)"+theClass+"(\\s|$)");
    >         for (i = 0, j = 0; i < elemsLen; i++) {
    >                 if ( pattern.test(elems.className) ) {
    >                         classElements[j] = elems;
    >                         j++;
    >                 }
    >         }
    >         return classElements;
    >
    > }
    >
    > /* Line 111 below */
    > /* from this <th>, I want to retrieve the word "Call" from the second
    > <span>,
    >    the <span class='chtxt'...>Call</span>
    >
    > <th class="cal_option_symbol" style="color:rgb(204, 0, 51);">
    > <span class='chimg'><img src='http://www.sellmycalls.com/pics/blu-mins.jpg'
    > alt='hide column' title='hide column'
    >      onclick="return columnHideShowByImg(this,'Call');"></span>
    > <span class='chtxt' title="symbol of this call option"
    > style="font-weight:bold;"
    >      onClick="return selectColumnAsFilter(this);">Call</span>
    > <span class='chtri'><img src='http://www.sellmycalls.com/pics/asc.jpg'
    > alt='ascending sort' title='ascending sort'
    >      onclick="return columnToggleSortOrder(this);"></span>
    > </th>
    > */
    > // enter here with 'col' = the <th> element
    > function getColHdrText( col ) {
    >   var ch, s;
    >   ch = getElementsByClass( 'chtxt', col, 'SPAN'  );
    >
    > // Firebug tells me here that ch == the 'chtxt' element, so
    > // I figure I should be able to just retrieve innerHTML from
    > // that element, right?
    >
    >   s = ch.innerHTML;     // but none of these work so I'm
    >   s = ch.innerText;     //   missing something crucial.
    >   s = ch.textContent;   // what is that something?
    >   s = ch.value;
    >   return (s && s != 'undefined') ? s : 'nfg' ;
    >
    > }
    >
    > If you have a closer look at the getElementsByClass() function that you are
    > calling, starting with its name and going on with the loop inside, you can
    > see that it returns an array of element object references.  Therefore, you
    > are accessing the Array instance instead of the element object.  That Array
    > instance has neither property that you tried to read from.  
    >
    > Firebug indicates that `ch' stores an Array instance reference by displaying
    > brackets in the console.  You must have missed that.  You could access the
    > first element of the array with `ch[0]'.
    >
    > BTW, the getElementsByClass() function here is error-prone for several
    > reasons; search the archives for further information and better
    > alternatives.
    >


    Biggest problems I see are the undeclared variables (likely declared
    elsewhere).

    function getElementsByClass (theClass, node, tag) {
    var classElements = [];
    if (!node) {
    node = window.document;
    }
    if (!tag) {
    tag = '*';
    }
    var elems = node.getElementsByTagName(tag);
    var pattern = new RegExp("(^|\\s)" + theClass + "(\\s|$)");
    for (var i = 0, j = 0, l = elems.length; i < l; i++) {
    if (pattern.test(elems.className)) {
    classElements[j++] = elems;
    }
    }
    return classElements;
    }
     
    David Mark, Dec 4, 2009
    #3
  4. lcplben

    lcplben Guest

    On Dec 3, 11:28 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > lcplben wrote:


    [ much of my original code is snipped for clarity ]

    > > The problem page ishttp://sellmycalls.com/no-hdrtext.htmland the
    > > problem is at lines 111-137.

    >


    > The relevant code is (you want to post this next time):
    >
    > /* Line 69 below */
    > function getElementsByClass ( theClass, node, tag ) {
    >         var classElements = new Array();

    .....
    >         return classElements;
    > }
    >
    > /* Line 111 below */
    > > /* from this <th>, I want to retrieve the word "Call" from the second
    > > <span>,
    > >    the <span class='chtxt'...>Call</span>


    > // enter here with 'col' = the <th> element
    > function getColHdrText( col ) {
    >   var ch, s;
    >   ch = getElementsByClass( 'chtxt', col, 'SPAN'  );
    >
    > // Firebug tells me here that ch == the 'chtxt' element, so
    > // I figure I should be able to just retrieve innerHTML from
    > // that element, right?
    >
    >   s = ch.innerHTML;     // but none of these work so I'm
    >   s = ch.innerText;     //   missing something crucial.
    >   s = ch.textContent;   // what is that something?
    >   s = ch.value;
    >   return (s && s != 'undefined') ? s : 'nfg' ;
    > }
    >
    > If you have a closer look at the getElementsByClass() function that you are
    > calling, starting with its name and going on with the loop inside,


    Yes, indeed.

    > you can
    > see that it returns an array of element object references.  Therefore, you
    > are accessing the Array instance instead of the element object.  That Array
    > instance has neither property that you tried to read from.  
    >
    > Firebug indicates that `ch' stores an Array instance reference by displaying
    > brackets in the console.  You must have missed that.  You could access the
    > first element of the array with `ch[0]'.


    Thank you.

    > BTW, the getElementsByClass() function here is error-prone for several
    > reasons; search the archives for further information and better
    > alternatives.


    OK. Thank you so much, PE, for your hugely informative and useful
    answer. It is one of the top-ten responses I've seen on Usenet in
    twenty years and I appreciate it very much.

    -- ben
     
    lcplben, Dec 4, 2009
    #4
  5. lcplben

    lcplben Guest

    On Dec 3, 11:28 pm, Thomas 'PointedEars' Lahn <>
    wrote:

    > BTW, the getElementsByClass() function here is error-prone for several
    > reasons; search the archives for further information and better
    > alternatives.


    Yes, it is a weak implementation, thanks. Maybe this deserves to be a
    FAQ. I notice that native getElementsByClassName() -- I didn't know
    there was any such thing -- returns not an array but a nodeList that
    changes dynamically, as of course it must. This property raises some
    interesting possibilities.

    -- ben
     
    lcplben, Dec 4, 2009
    #5
    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. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    581
    dorayme
    Jun 26, 2009
  2. Stéphane Klein
    Replies:
    2
    Views:
    1,869
    John Nagle
    Mar 30, 2010
  3. Stefan Behnel
    Replies:
    0
    Views:
    510
    Stefan Behnel
    Mar 29, 2010
  4. Dan Bishop

    DataGrid (body only) contained in <span>...</span> tags

    Dan Bishop, Jun 7, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    310
    Kilic Beg
    Jun 7, 2004
  5. Wang, Jay
    Replies:
    5
    Views:
    528
    Wang, Jay
    May 25, 2004
Loading...

Share This Page