function not defined

[rick.emmet]

Hello everyone,

I have a problem that is stumping me. I wrote some JS code that worked fine on two development machines and then work perfectly on the production server. I made a single change to my JS library and tested it, one of my JS function (a show / hide) stopped working. I reverted back to the original code and restested it. The showHide function is still not working. Firebug provides an error message that says "showHide( ); is not defined."

 

I looked at the code and can't see anything wrong with it, so I went online to JSHint and validated the code. It validates. Here's the code in my JavaScript Library:

(function($) {
        // This allows the jQuery object to be used w/o interferance

        // Always nice to use strict mode
        "use strict";

 function ShowHide() {
            var head1 = document.getElementById("head1");
            var showform = document.form1.head1.checked;
            head1.style.visibility = (showform) ? "visible" : "hidden";
        }

})(jQuery);

And here is the JS code embedded in XHTML:

<form name="form1" >
<input type="checkbox" name="head1" onclick="ShowHide();" />Edit Content</form>

Here's what JSHint says of the code:

function ShowHide() {
'ShowHide' is defined but never used.

I don't see any syntax error (and neither does netBeans) and if JSHint says the code is valid, then I have no idea what is wrong. Anyone have a clue? Thanks very much for you help!

Cheers,

Rick

 

 

[Irate]

Your showHide function is captured within a closure - variables, functions, objects and basically everything defined within a closure is unique to the closure.

 

You don't need jQuery for that function, so define it before you start the closure.

 

 

function showHide() {
var head1 = document.getElementById("head1");
    var showform = document.form1.head1.checked;
    head1.style.visibility = (showform) ? "visible" : "hidden";
}
(function($){
 
...
 
 
})(jQuery);