External Javascript - Function not defined when it is?

Question

After coding the CSS, Javascript, and HTML5 code within the same HTML file for this web application, I decided to split the CSS and Javascript into their own respective external files and include them into the HTML5 file.

I ran into a minor issue as to which the Javascript code would not work until I added the following:

window.onload = function() { //script code}

Now it seems like everything but the functions do not load. Since the error that I discovered using Firebug says the function is not defined yet it clearly is.

Here is the code:

The HTML page http://turing.cs.olemiss.edu/~sbadams2/RebelFlow.html

The JS file http://turing.cs.olemiss.edu/~sbadams2/RebelFlow.js

I've read other responses which state that the path may be incorrect but everything else within the Javascript file loads fine with the exception of the actual function.

I'm not sure what may be causing this issue.

So all your functions aren't defined, or just window.onload is not working? Welcome to SO~ — Nick Rolando
– Nick Rolando, Commented Apr 10, 2012 at 2:22
Apparently window.onload works to a degree as it loads the Javascript code, unfortunately it now says that the functions are not defined despite the fact that they are. I am fairly new at Javascript and web applications. — Sbadams2
– Sbadams2, Commented Apr 10, 2012 at 2:25
When you coded everything together, where was the JavaScript, in the head or at the end of the body? — j08691
– j08691, Commented Apr 10, 2012 at 2:30
It was actually in the body of the HTML file. I actually moved the script include into the body to see if that may solve the issue but if I recall, it did not. — Sbadams2
– Sbadams2, Commented Apr 10, 2012 at 2:32

stewe · Accepted Answer · 2012-04-10 02:30:33Z

6

The problem is that javascript has function scope, which means that variables/functions defined inside a function are only visible within that function, not outside. window.onload=function(){/*your code here*/} creates an extra scope, so for example your createWellPump() function is not known outside of the window.onload wrapper function.

Easiest solution would be to remove the window.onload wrapper again and just load the script directly before the closing </body> tag.

answered Apr 10, 2012 at 2:30

stewe

42.8k13 gold badges82 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sbadams2 Over a year ago

Nailed it. That seemed to be the issue.

Collectives™ on Stack Overflow

External Javascript - Function not defined when it is?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related