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

L

lcplben

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
 
T

Thomas 'PointedEars' Lahn

lcplben said:
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
 
D

David Mark

lcplben said:
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;
}
 
L

lcplben

lcplben wrote:

[ much of my original code is snipped for clarity ]
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 */
// 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
 
L

lcplben

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top