The problem is likely that your functions.js file defines a $ method. From the sound of it, that method probably expects an ID string only, whereas jQuery's $ method expects a selector, meaning if the element has an ID of "foobar", then you would need to pass "#foobar" to jQuery whereas your method takes just "foobar".
jQuery provides a way to not conflict with other libraries that may define a $ function:
[
docs.jquery.com...]
However, if your Menu.js file uses the $ form of jQuery, then that will break.
JavaScript will load into the global namespace, which means that if you define a method "$" in multiple files, the last one defined will overwrite the previous one. That's way it's a good idea to create pseudo "namespaces" in JavaScript. Essentially, you create only 1 global object, and then all of your functions are defined within that object. So instead of doing this:
functions.js
function $(id) {
return document.getElementById(id);
}
function foo(id) {
var fld = $(id);
}
...
You would create a single object that contained your functions. There are many ways to do this, but here's one:
var MyNamespace = {
$: function (id) {
return document.getElementById(id);
},
foo: function (id) {
var fld = MyNamespace.$(id);
},
...
}
Note how method foo changed to call MyNamespace.$
With that said, you might be able to do something like this in your functions.js file:
(function () {
function $(id) {
return document.getElementById(id);
}
function foo(id) {
var fld = $(id);
}
...
})();
In that code, the entire contents are wrapped in an anonymous function which is executed immediately. This will prevent you from contaminating the global namespace, but the methods within the anonymous block can only be called from within the anonymous block. You couldn't, for example, call foo from outside of the anonymous block.
