The property of a undefined or null-link cannot be retrieved

[Daniel1111]

I am using JavaScript for filter some content of a dynamically built table. I have a problem while read the content of a cell of the table
I read the content in my JavaScript with

var rows = table.getElementsByTagName("tr");
var row = rows[i];
cells = row.getElementsByTagName("td");
modelRange = cells[0];
filter = modelRange.innerText; // or filter = modelRange.textContent
 

My relevant xslt code is:

<xsl:for-each select="logstore/plane/trigger">
            <tr>
                <td align="center"><xsl:value-of select="../Name"/></td>
                <td align="center"><xsl:value-of select="date"/></td>
                <td align="center"><xsl:value-of select="date"/></td>
                <td><xsl:value-of select="test"/></td>
            </tr>
        </xsl:for-each>
 

When I try to start my JavaScript via Internet Explorer 11 I do get the error: The property of a undefined or null-link cannot be retrieved. This is a problem of

filter = modelRange.innerText;

. How can I solve that problem?

[gits]

look closely what it means - modelRange is either undefined or null - that means you obviously have a table row with no td-elements. as i mentioned in your other thread already - IE used to create tables a bit differently so i assume your script fails at the first row where the table has probably a thead-element and a row with th-elements instead of td-elements.

[Daniel1111]

I am using

 if (filterDropDown === "All" || !modelRange || (filterDropDown === modelRange.innerText)) {}

in my JavaScript. If I would not use it and just go through the rows with

for (var i = 0; i < rows.length; i++) {} 

it will not throw an error. The error only occurs by using

filterDropDown === modelRange.innerText

in the if-case.
If I use

if (i > 2 && modelRange.innerText){}

no error will occur. So it is a problem with "===". Is it possible that it has problems with string comparison?

[gits]

javascript has no problems with string comparisons if your condition would not be met then those values are in fact not identical.

those few lines that you throw up here don't show that it is as you think it would be. The first post you made show some code where the error message makes perfect sense in case modelRange is undefined/null - whereas that error message wouldnt make sense if the problem would come from that condition. so i think different issues getting mixed up here now.

[Daniel1111]

Okay so what exactly do you recommend to do? You write something like: your first table row has no td-elements. What does that mean? Should I change my th rows with td rows?

[gits]

no - what i think is that in IE only you have that issue as since IE always creates a thead when creating a table dynamically through javascript - as far as i remember at least. so you would just have to harden your code for that issue like (going back to your code here):

cells = row.getElementsByTagName("td");
 
if (!cells[0]) {
 
    // you have a row with no td elements here so interrupt
    // your script here accordingly with skipping this row
    // since you obviously want to rely on that td-cells
    // in your next line
}

for the other issue where your strings dont match - you will need to trace the values as javascript sees them - it might be invisible characters or such that dont let them match.

[Daniel1111]

I have just think about it. You are right. But usually I am using

if (drop_down_menu === "All" || !modelrange || (filter === modelrange.innerText)) {}

When I am using that, no error will occr. With

!modelrange

I am just asking if this is the header row. So my header row will stay and won't disappear. All other rows will disappear because that if-case will be false for all other rows. That just can be the comparison of drop_down_menu with "All" and filter with content of modelrange.
Can you confirm that?
Thanks

[gits]

as i said - i think its 2 different issues. the one with the undefined/null issue occured in your first post because of javascript tells you that it couldnt retrieve an innerText property from a non existing object. so basically the script was interrupted at that line.

if that error is avoided the script runs through the next lines - otherwise it just holds at an fatal error. so if it comes to that condition (i assume here that the condition is located after the above mentioned lines where the error occured) and the strings dont match - then the strings are in fact not matching or it could be that your drop_down_menu doesnt equal "All" already - i cant see so far how that is retrieved by your script.

[Daniel1111]

You said: that it couldnt retrieve an innerText property from a non existing object.
What do you mean with non existing object?
In my JavaScript I declare modelrange with

var modelrange;

and then just use

var filterDropDown === modelRange.innerText

. Then the error occurs but I have declared modelrange. It does not come out of anything.
If I use

 if (i > 2 && modelRange.innerText === rows[i - 1].getElementsByTagName("td")[0].innerText) {

it does not throw any error, but that is the same "modelRange.innerText". That is working. So how can JavaScript tells me on one side it could not retrieve an innerText property from a non existing object and on the other hand it is doing very well?

[gits]

then u didnt post the proper code in post 1 of this thread - because in that code the error comes from exactly not being able to retrieve innerText from that modelRange which is obviously set to undefined by not having a td-cell in cells[0].

[Daniel1111]

Okay if I use

if (drop_down_menu === "All" || !modelrange || (filter === modelrange.innerText)) {//show this row}
else {//hide this row}

it hides all rows except my "th" rows. So the comparison is just false because no error occur right?
If I just use

if (filter === modelrange.innerText)

then it will throw an error because the first row is "th" and not "td" but as I use not only

filter === modelrange.innerText

but also

!modelrange //if this is the header row

, then the first header row will not be compare with modelrange.innerText but the second and all other "td" rows will be compared. So it's just a comparison problem if you see it like how I described isn't it? Thanks

[gits]

ye - if the code in the first post isnt used as it is posted before the comparison - then its the comparison failing - but you removed 2 conditions to test - thats what i said in my 2nd recent post - it can return false here:

drop_down_menu === "All"

and here:

filter === modelrange.innerText

[Daniel1111]

Okay yes thanks. Than I will try to fix the "comparison" problem. Do you have any idea what IE makes different to Firefox with innerText? My string I need to compare is e.g. "RB_123". So firefox can do this. If I use "textContent" instead of "innerText" it does work too on FF but not on IE.

PS: Sorry for the misunderstanding. I just thought I post as less as necessary. It just was too less.

[gits]

i am not aware of differences betweeen the browsers with textContent - but that doesnt mean there aren't such that i am just unaware of.

as far as i know IE was implementing innerText first while the other browsers had textContent - but both yield different results and since IE 9 textContent should be supported in IE as well - and as tested recently here - i didnt see it behave differently for a static table at least.

but this can be easyly checked by simply letting javascript write the values that it in fact sees to the console - so you can see what happens there.

[Daniel1111]

Okay great idea. Thanks.

[Daniel1111]

Hi. I have tried

console.log(filterDropDown)

to get the content of my selected items in the drop-down-menu. When I am using Firefox the content is correct. When I am using IE I do not get any content. The content is empty. So I think the problem is the Following:

dropdown = document.getElementById('modelRangeDropdown');
filterDropDown = dropdown.value;
 

I think there is a problem with ".value". How else can I get the actual value of my dropdown menu?
Thanks

[gits]

probably you should use:

dropdown[dropdown.selectedIndex].value

[Daniel1111]

I have tried

filterDropDown = dropdown[dropdown.selectedIndex].value;

but this is not working too

[gits]

hmmmm - may be going the full path like this works then?

dropdown.options[dropdown.selectedIndex].value

if not you would need to check if your options have actually values set.

PS: since it did look weird to me i just tested it on an IE11 now with a static list where the value properties are set - all 3 versions did work - so i guess the listoptions are missing the value-properties in your case somehow.

[Daniel1111]

I am now using

filterDropDown = dropdown.options[dropdown.selectedIndex].text;

This is working.
So I have to use text instead of value

[gits]

so in fact your listoptions have no value attribute then - as it turns out - in this case IE is doing it correctly from my point of view - since obviously other browsers just return the text in case no value attribute is present - thus leading to such confusion here. properties shouldn't be silently 'reused' by browsers. Even if i hate to have to say that in favor of IE now :)

to avoid that issue the best way would be to make sure in your code where the options are created - that you create and assign the value property.