Calling external js function from another external js file gives "Undefined" error

I have this code in plug开发者_开发百科ins.js:

$(document).ready(function() {                         

watermark = function(elemId, text, hoverClass, normalClass, parentId){
    // onFocus event
    $("#"+elemId).focus(function(){
        ($(this).val()==text)
            $(this).val('');
        (parentId!=0)
            byId(parentId).className = hoverClass;
    });
    // onBlur event
    $("#"+elemId).blur(function(){
        ($(this).val()=='')
            $(this).val(text);
        (parentId!=0)
            byId(parentId).className = normalClass;
    }); 
}
});

Then I have this in the index.js file:

new watermark("footer_contact_name", "Name", "footer_form_text_active", "footer_form_text", "footer_form_field_1");

Everything works when written in the same js file, but when calling it like this from the index.js file, I get an undefined function error in FireFox, using Firebug to debug.

Any ideas?

Thanks

BTW: I include these in index.html like this:

<script src="scripts/plugins.js" type="text/javascript"></script>
<script src="scripts/index.js" type="text/javascript"></script>

You need to call the function after the document gets ready - wrap it in:

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

The watermark functions gets declared when the DOM is ready to be manipulated (inside $(document).ready(function(), therefor won't be available the moment your index.js gets included.

EDIT:

You kind of have to make the call to watermark after the DOM is ready to be manipulated, since it uses elements in the DOM. A solution would be to declare your watermark function outside the $(document).ready(function(), and then call it from index.js inside a $(function() { (shorthand for $(document).ready()):

functions.js:

watermark = function(elemId, text, hoverClass, normalClass, parentId){ 
   // function logic
}

index.js:

$(function() {
   new watermark("footer_contact_name", "Name", "footer_form_text_active", "footer_form_text", "footer_form_field_1");
}

You're only defining the watermark() function after the DOM is loaded. You could define it outside the $(document).ready() call and you could embed the $(document).ready() call inside it, so it will execute when the DOM is loaded, but be available before that.

For example:

watermark = function(elemId, text, hoverClass, normalClass, parentId) {
    $(document).ready(function() {
        /* ... */
    }
}