CODEWITHSUNDEEP
javascript
Andrei Dinu Nechita
Andrei Dinu Nechita

Reputation: 3

Declared function seen as undefined by IE 11

I am having some problems with function declarations in IE. It appears, even if I link the function directly to the window object. I tried switching with document in stead of window, but with no success.

Here is the basic code that I am trying to use:

window.addEventListener('load', function () {
    function initChart (id) {...}


    //linking to window object
    window.initChart = initChart;


});

As I said, I even tried to link it directly: window.initchart(id){...}. More that that, I even included the js file I declared the function inside the body(due to a rumor that says that IE doesn't see function declared in head section)

After that, inside script tags i call initChart() with a valid id and I get this error inside the IE console: 'initChart' is undefined.

<script>
    initChart('chart');
</script>

The strange thing is that in Chrome, Firefox and Opera has no such problem. Any ideeas?

PS: If this is a duplicate, I did not found the question that covers this.

Upvotes: 0

Views: 76

Answers (2)

Andrei Dinu Nechita
Andrei Dinu Nechita

Reputation: 3

The problem apparently was not the linkage between the function and the window object. In my load event I had some ES6 string interpolation(something like this: console.log(`#${id}`)) and IE falls short on this. He doesn't know what to do with it. So as a consequence, my window.initChart() was not even compiled. After I commented the code in matter, my initChart function was working fine. Thanks for help tho, @nopole!

Upvotes: 0

nonopolarity
nonopolarity

Reputation: 151264

You also need to do initChart('chart'); inside of the window load event handler (this one or a later added one). Or you can do that in another event handler that you know for sure happens after this window load event handler.

As your code is processed by the browser, it knows to do something on the window load event, which is to set your window.initChart.

But then later on you are using it right away, without the event of window load happening yet.

If it doesn't happen in Chrome, I am wondering if everything is loaded, but even so, I'd think your window.initChart is set in the next event cycle. (let me try to do some experiments -- you are not doing any of these in the debugger but all inside an HTML file?). But it really shouldn't be ok in Chrome, because the load event handler doesn't occur before your <script> tag is parsed and executed, which does initChart('chart'); already.

But in any event, it is best to follow the event sequence: if you set window.initChart on window load event handler, then also only call window.initChart() in the same and later added event handler, or in an event handler that happens afterwards.

You can see in the following HERE 02 happens before HERE 01:

window.addEventListener('load', function() {
  console.log("HERE 01");
});

console.log("HERE 02");

I am running the following in Chrome and I did get an error as expected:

window.addEventListener('load', function() {
  function foo() {
    console.log("HERE 01");
  }
  window.foo = foo;
});

foo();

But this one worked as expected:

window.addEventListener('load', function() {
  function foo() {
    console.log("HERE 01");
  }
  window.foo = foo;
});

window.addEventListener('load', function() {
  foo();
});

Upvotes: 1

Related Questions