By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,434 Members | 2,902 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,434 IT Pros & Developers. It's quick & easy.

Event-Attribut "onchange" on Internet Explorer does not work at all

P: 31
I have the same question as

https://bytes.com/topic/javascript/a...hange-checkbox

But now I am using Internet Explorer 11 and I always get errors when "onchange" is called. My JavaScript cannot be opened. I have used "onclick" but same problem.
The error which occurs is: The value of property "JavaScript_function" is null or undefined, no function-object.
Any ideas?
Jun 3 '19 #1
Share this Question
Share on Google+
23 Replies


gits
Expert Mod 5K+
P: 5,333
please post the code that you use (at least an example of it) - the events are fired as you can see - otherwise there wouldn't be a error message - so your errors will be in the call itself or somewhere in the code that is called.
Jun 3 '19 #2

P: 31
So this is my xslt code. I do have a JavaScript Code but it is empty, but still the same error. Line 15 and line 26 are the important lines with "onchange"
Expand|Select|Wrap|Line Numbers
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
  3. <xsl:template match="/">
  4. <html>
  5.     <head><title>Secrets</title></head>
  6.  
  7. <body onload="script_for_all_functions();">
  8.  
  9. <table id="myTable">
  10.         <colgroup>
  11.             <col width="150" style="background-color:e2e2e2"></col>         
  12.         </colgroup>
  13.         <tr  style ="background-color:a5a5a5">
  14.             <th rowspan="2">plane
  15.                 <select id="modelRangeDropdown" onchange="script_for_all_functions()">
  16.                      <option selected="selected">All</option>
  17.                      <xsl:for-each select="logstore/Fahrzeug">
  18.                         <option>
  19.                          <xsl:value-of select="Name" />
  20.                         </option>
  21.                      </xsl:for-each>                    
  22.                 </select>                   
  23.             </th>   
  24.             <th colspan="2" width="330">date</th>
  25.             <th rowspan="2">Secret
  26.                 <input type="checkbox" id="identicalSecrets" onchange="script_for_all_functions()"></input>
  27.                 <label for="identicalSecrets">hide identical secrets</label>
  28.             </th>
  29.         </tr>
  30.  
  31.         <tr>
  32.             <th align="center" style="background-color:a5a5a5">begin</th>
  33.             <th align="center" style="background-color:a5a5a5">end</th>
  34.         </tr>
  35.         <xsl:for-each select="logstore/plane/trigger">
  36.             <tr>
  37.                 <td align="center"><xsl:value-of select="../Name"/></td>
  38.                 <td align="center"><xsl:value-of select="date"/></td>
  39.                 <td align="center"><xsl:value-of select="date"/></td>
  40.                 <td><xsl:value-of select="secret"/></td>
  41.             </tr>
  42.         </xsl:for-each>
  43.     </table>    
  44.     <script type="text/javascript" src="/C:/eclipse-workspace/adclasses/src/inbox/script_for_all_functions.js"></script>    
  45. </body>
  46. </html>
  47. </xsl:template>
  48. </xsl:stylesheet>
  49.  
Jun 3 '19 #3

gits
Expert Mod 5K+
P: 5,333
where is the javascript code included in the final page? so far i only can see that you call a method script_for_all_functions but its not defined anywhere nor is it included?

PS: i see the include now at the bottom - so post that code
PPS: why is there a / at the beginning of the include path?
Jun 3 '19 #4

P: 31
I deleted everything from my Javascript code to make sure that the problem is not JavaScript.
But here is the code:
Expand|Select|Wrap|Line Numbers
  1. function script_for_all_functions() {
  2.  
  3. }
  4.  
And why there is a "/" at the beginning of the include path is that it won't work otherwise on Firefox. I don't know why but it's only working with "/" on Firefox. --> No problem on firefox but on IE.
PS: I mean IE only throw errors because of onchange and not because of "/" at the beginning. I am pretty sure "/" is correct
Jun 3 '19 #5

gits
Expert Mod 5K+
P: 5,333
so it's working in firefox but not in IE? just put an alert right in the first line of your included file script_for_all_functions.js like:

Expand|Select|Wrap|Line Numbers
  1. alert('script loaded');
so when your script can load correctly you will see that alert on your page. its impossible that an onchange event should behave differently on firefox and IE when its just called the same way - the error must be somewhere else - and i suspect the include so that the function is just undefined.
Jun 3 '19 #6

P: 31
Ok I will try this. What would you recommend how to change the include? Because it's working on FF...
Jun 3 '19 #7

gits
Expert Mod 5K+
P: 5,333
try to use relative paths - and usually i would set up a local webserver for testing the app so that you have a real 'web-runtime'. you will have to change those absolute include paths when you deploy that to a production system - so its always error prone to have such pure local development systems that are not near a real system.
Jun 3 '19 #8

Rabbit
Expert Mod 10K+
P: 12,366
You're trying to point to a javascript on your local C drive? That's not going to work from the browser's perspective. You need to use a path that the browser can access. It's not your computer that's interpreting the location of the javascript file, it's the user's browser that's pulling it from their end. They have no concept of your local C drive.
Jun 3 '19 #9

P: 31
I understand what you are writing but why should it not work on my computer? It may not work on any other users computer. But it still work on Firefox, why not on IE.
But I will try to use relative paths now.

Update: When using relative path and alert IE will run my script.

Update2: The problem is
Expand|Select|Wrap|Line Numbers
  1. let row of rows
.
How should I change that?
Jun 4 '19 #10

gits
Expert Mod 5K+
P: 5,333
so - as suspected it was the include path. basically this should work in all browsers the same now - and you can put the alert into your event-handling function to see that even the events (especially that onchange event) should work across all the browsers.

PS: using the alert for such debugging is basically a bad idea and i suggest not to let it become a habit. i just suggested it so far for the sake of simplicity. a better way with nearly the same effect would be to work with the developer console and console.log(msg) instead of the alert. alerts are modal thus you always have to act with a click or a keypress to get rid of the popup - this is especially not fun when you put alerts into a loop :)
Jun 4 '19 #11

P: 31
Thanks for that. Do you also have a quick solution for my second update that IE will not work with
Expand|Select|Wrap|Line Numbers
  1. for (let row of rows) {...}
?
I know that IE does not like "let" normally. So I can replace it with "var". But there is still a problem with "row of rows"
Jun 4 '19 #12

gits
Expert Mod 5K+
P: 5,333
just use the for...in loop - in case you use it for an array and have that extended somehow you would need to check for non-native properties as well - simply speaking for...in treats the array like a 'normal' object - more detailed explaination is here:

https://developer.mozilla.org/en-US/...ments/for...of
Jun 4 '19 #13

P: 31
Okay I got it. Is there any website which describes the different of functions between FF and IE? Now I have the problem for
Expand|Select|Wrap|Line Numbers
  1. cells = row.getElementsByTagName("td");
Error is: The property of "getElementsByTagname" of an undefined cannot be called.
Jun 4 '19 #14

gits
Expert Mod 5K+
P: 5,333
as i said - the problem you have now is that row will be undefined or such since you replaced of by in. Depending on how your rows structure looks like, it can behave differently. It should produce errors in all browsers in case its that issue that i suspect. so basically seeing more of the code would help much - since its like guesswork at the moment where i only assume a lot of things.

having said the above - a good starting point to find out about browser supports and quirks is here:

https://www.quirksmode.org/

and an ES6 comaptibilty table can be found here:

http://kangax.github.io/compat-table/es6/
Jun 4 '19 #15

P: 31
This is a part of my code. As commands you can see which if-cases will be executed and which not. I am using the development console but do not get any errors so far but the if-case is being executed in FF:
Expand|Select|Wrap|Line Numbers
  1. function test_internet_explorer() {
  2.  
  3.     // Variables
  4.     var table, checkBox, filterCheckBox, filterDropDown, rows, cells, secret, modelRange, dropdown, rowCount;
  5.     dropdown = document.getElementById('modelRangeDropdown');
  6.     table = document.getElementById('myTable');
  7.     rowCount = table.rows.length; 
  8.     checkBox=document.getElementById('identicalSecrets');
  9.     rows = table.getElementsByTagName("tr");             
  10.     filterCheckBox = checkBox.checked; 
  11.     filterDropDown = dropdown.value;
  12.     var index = 0; 
  13.  
  14.  
  15.     for (var i = 0; i < rows.length; i++) { 
  16.         var row = rows[i];
  17.         cells = row.getElementsByTagName("td"); 
  18.         modelRange = cells[0] || null; 
  19.         secret = cells[3]; 
  20.  
  21.         // does not execute
  22.         if (i > 2 && modelRange.textContent != rows[i - 1].getElementsByTagName("td")[0].textContent) {
  23.             rows[i - 1].getElementsByTagName("td")[2].firstChild.nodeValue = "-";
  24.             alert('script loaded');
  25.         }
  26.  
  27.         // does execute
  28.         if (i === rowCount - 1) { 
  29.             rows[i].getElementsByTagName("td")[2].firstChild.nodeValue = "-";
  30.         }
  31.  
  32.         // does not execute
  33.         if (i > 2 && modelRange.textContent === rows[i - 1].getElementsByTagName("td")[0].textContent) {
  34.             rows[i - 1].getElementsByTagName("td")[2].firstChild.nodeValue = rows[i].getElementsByTagName("td")[1].textContent;
  35.         }
  36.     }
  37.  
  38. }
Jun 4 '19 #16

gits
Expert Mod 5K+
P: 5,333
well i could imagine that IE retrieves a thead as well - between line 9 and 10 insert:

Expand|Select|Wrap|Line Numbers
  1. console.log(rows);
that should let you inspect the collection retrieved in line 9 at the console.
Jun 4 '19 #17

P: 31
That did not solve the problem. If I change
Expand|Select|Wrap|Line Numbers
  1. if (i > 2 && modelRange.textContent != rows[i - 1].getElementsByTagName("td")[0].textContent) {
to
Expand|Select|Wrap|Line Numbers
  1. if ( i > 2)
it will execute the if-case. So it has to be a problem with
Expand|Select|Wrap|Line Numbers
  1. .textContent
or
Expand|Select|Wrap|Line Numbers
  1. .getElementsByTagName
but I don't know why and I don't know how to change that as there is no error and it is working with Firefox.
Jun 4 '19 #18

gits
Expert Mod 5K+
P: 5,333
you have to debug that. check what exactly is processed by IE - the simplest way is to log into the console and see if it processes what you expect there.

- IE should support textContent since v9
- getElementsByTagName is working in all browsers - but IE might process an imaginary thead as well so that can mess your code up here
Jun 4 '19 #19

P: 31
I think I have found the problem. I have tried
Expand|Select|Wrap|Line Numbers
  1. innerText
instead of
Expand|Select|Wrap|Line Numbers
  1. textContent
and it is working.
As I don't need to change content in a <script> or a <style> it is working for me.
Jun 4 '19 #20

gits
Expert Mod 5K+
P: 5,333
well - good you found a workaround - but its still strange since IE shouldn't have an issue with textContent - cant test that myself though since i dont have an IE here at the moment.
Jun 4 '19 #21

gits
Expert Mod 5K+
P: 5,333
ok - i did test textContent in IE 11 now with a table and getElementsByTagName - it works as expected and exactly the same in Firefox 67. So there isn't a problem with the methods but with the contained text in the nodes. this even explains while its working with innerText which basically ommits additional spaces or leading/trailing linebreaks and such - which i think will be the problem in the 'non-working' script above.
Jun 4 '19 #22

P: 31
Thanks for testing. But do you have an explanation why, if I had hyphens, linebreaks etc., it does only work on IE11 when not using things like that?
PS: Hyphens, linebreaks etc. do work with Firefox
Jun 4 '19 #23

gits
Expert Mod 5K+
P: 5,333
as i said - it can only be tested with the actual data / complete case - that i cannot know. i simulated exactly the steps you had in your shown script with a static html page and table with text where it did work exactly the same in both browsers. if you have a dynamically created table/content it can be different - IE was always working a bit different when creating tables per JavaScript for example.
Jun 4 '19 #24

Post your reply

Sign in to post your reply or Sign up for a free account.