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.

Answer 1

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.