JS Function Undefined?

Question

Why when I fire a function it throws an error that it is undefined? I have an external js file with all my scripts, and an html div that fires the function onchange.

I've included the JS file at the top of the page, and the function I am calling is the first function in the JS file. Why would it return as undefined? My other functions seem to be working fine.

All of my functions are in an external JS file inside of one

$(document).ready(function(){ 
});

I thought JS was pre-compiled and it didn't matter the order of declaring functions etc.

Example: JS:

function makeIcon3D() {
 var icon3DStroke1 = getStrokefor3DIcon1();
 function getAlert() {
 alert('hi');
 }
 });

HTML:

<input type=text onchange=makeIcon3D();>

• Rob G: Are you including jQuery before including your ready handler call?
• EHerman: yes my jquery is called before anything on the page. Im not getting any jquery erros, I have numerous functions written in the js file and 99% of them work. this one does not
• Felix Kling: possible duplicate of function declared inside document.ready is undefined?
• mplungjan: Much better to assign the handler IN the ready
• EHerman: Would doing something like this work? window.getAlert = getAlert

Answer 1

Does your code look like this: ?

$(document).ready(function(){ 
 function foo() {
 alert("bar");
 }
});
foo(); // <-- foo is not defined here

Since ready fires after the first initial event loop event this wont work:

var foo;
$(document).ready(function(){ 
 foo = function() {
 alert("bar");
 }
});
foo(); // <-- foo is still undefined here

You will need to do something like this:

var foo;
$(document).ready(function(){ 
 foo = function() {
 alert("bar");
 }
});
$(document).ready(function(){ 
 foo(); // "bar"
});

---

These issues stem from bad scoping, putting things in the global scope that shouldn't be global there or vica versa. Figure out where you want your code to be.

• EHerman: Yea this is the first time I am writing a full JS file from scratch, so I believe scoping is the issue. I was kind of just adding as I was going
• Halcyon: As a general tip, most of your code can be in the global scope, if you keep your function names nicely namespaced you wont run into too many problems. The initiation part is what you will want to have in document.ready, so this function should be really short, like: $(document).ready(function () { component1.init(); component2.init(); });
• EHerman: Thanks for the tip Frits, I appreciate that!

Answer 2

Functions defined inside another function are local to that containing function and don't exist outside of it.

You don't need $(document).ready(function() {...} to define functions anyway, since they don't do anything to the DOM just by being defined.

Answer 3

Javascript isn't precompiled, it is considered JIT (just in time compilation).

It is possible your javascript function contains a symantic error and doesn't compile and therefore can't be referenced.

Also, your function might be out of scope, as the other answers describe.

• EHerman: I think out of scope is the problem, I guess I just don't have a solid understanding of structure and when functions fire etc.

Answer 4

Try binding your event handler with $("#someId").bind('change', function() { //handler...

Also, wrap your html attributes in quotes.

Answer 5

I came across this in another StackOverflow thread:

Setting the variable to a global namespace with the window property worked wonders.

window.getAlert = getAlert;

and I was then able to access that variable any where in my code. I still don't fully understand why, but it works now.

I appreciate all the helpful responses that lead me to my final answer. I am still trying to grasp writing javascript from scratch. I can manipulate it and read it, but writing from scratch usually ends in errors due to poor scoping and such. Thanks again