Java Script Errors in IE Vs FireFox?

Question

I use the following script for get the values from HTML Table.If I use innerText ,It will work on IE and Chrome Fine.But FireFox show the Error: row.cells[0].innerText is undefined Source.If I use textContent It will work Fine in Chrome and FireFox.But IE Shows the Following Error cells.0.textContent' is null or not an object.How to change this script Work on IE,Chrome,FireFox without Error? I use either c= row.cells[0].innerText.strip();or c=row.cells[0].textContent.strip();

        function a()
        {

            var table = getServerObject("b");
            var row,c;
            for (var i = 2; i < table.rows.length - 1; i++)
            {
                row = table.rows[i]; 
                if(row.cells.length==1)continue;
                c= row.cells[0].innerText.strip(); //It was work in chrome and IE (or)
                c=row.cells[0].textContent.strip();//It was work in chrome and FF
                if(c==0)
               {
                //Something
               }

            }
        }

Read This

xkeshav
– xkeshav

2012-06-20 08:50:53 +00:00
Commented Jun 20, 2012 at 8:50 — xkeshav
– xkeshav, Commented Jun 20, 2012 at 8:50

Sirko · Accepted Answer · 2012-06-20 09:19:28Z

Just test before using the property, which is available:

var contentEnabled = document.textContent === null;

Later on you have a if to decide, which property to use

if ( contentEnabled ) {
  c= row.cells[0].textContent.strip(); // It was work in chrome and FF
} else {
  c= row.cells[0].innerText.strip(); // It was work in chrome and IE
}

or shorter as suggested by @RobW

c = row.cells[0][contentEnabled ? 'textContent' : 'innerText'].strip();

For the slight differences between both properties note the following from the MDN docu on textContent:

Differences from innerText

Internet Explorer introduced element.innerText. The intention is pretty much the same with a couple of differences:

Note that while textContent gets the content of all elements, including <script> and <style> elements, the mostly equivalent IE-specific property, innerText, does not. innerText is also aware of style and will not return the text of hidden elements, whereas textContent will. As innerText is aware of CSS styling, it will trigger a reflow, whereas textContent will not.

That same page says that document.textContent is explicitly null if it's supported, otherwise it's undefined. I think you'd be better off checking "textContent" in document.
To reduce repetition, I would use c = row.cells[0][contentEnabled ? 'textContent' : 'innerText'].strip();. Also ... === null ? true : false can be shortened to ... === null.

coolguy · Accepted Answer · 2012-06-20 08:46:51Z

function a()
        {

            var table = getServerObject("b");
            var row,c;
            for (var i = 2; i < table.rows.length - 1; i++)
            {
                row = table.rows[i]; 
                if(row.cells.length==1)continue;
                   if(typeof (row.cells[0]) != "undefined"){
                c= row.cells[0].innerText.strip(); //It was work in chrome and IE (or)
                c=row.cells[0].textContent.strip();//It was work in chrome and FF
                if(c==0)
               {
                //Something
               }
                 }
            }
        }

Florian Margaine · Accepted Answer · 2012-06-20 09:37:07Z

If you truly want a cross-browser way (IE<9), use jQuery. Seriously, you will spend a lot less time with these quirks.

Based on its inspiration, you can do it like it does: use nodeValue, the only cross-browser way. However, nodeValue doesn't work on elements, but it does work on textNodes (full list on which elements it works).

function getText( el ) {
    var text = '';

    // Recursively get the text
    ( function recur( el ) {

        // If it's a textNode or a CDATA node
        if ( el.nodeType === 3 || el.nodeType === 4 ) {
            text += el.nodeValue;
        }

        // If it has childNodes, recursively get their nodeValue
        if ( el.hasChildNodes() ) {
            for ( var i = 0, l = el.childNodes; i < l; i++ ) {
                recur( el.childNodes[ i ] );
            }
        }
    } () );
    return text;
}

Usage:

getText( row.cells[0] );

If you don't care about the differences (innerText and textContent don't return the same output, not to mention which elements it gets, there are also textNodes differences) and just want a quick solution, use this:

function getText( el ) {
    if ( 'textContent' in el ) return el.textContent;
    else return el.innerText;
}

Collectives™ on Stack Overflow

Java Script Errors in IE Vs FireFox?

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related