My Javascript code doesn't work anymore after I wrap it in a self-calling function

Question

I see in a lot of code that people wrap everything in a self-calling function so everything stays more or less private. Doing this to my code resulted in it not working anymore.

I Googled a bit about it and saw that it is good practice to place the whole source file in a self-calling function so I decided to try it too. I tried this with my little piece of code and it just doesn't work anymore after doing it.

(function($) {
    const auth = firebase.auth();

    function logIn(){
        window.alert("pressed log in button");
        var userEmail = document.getElementById("txtEmail").value;
        var userPass = document.getElementById("txtPassword").value;

        auth.signInWithEmailAndPassword(userEmail,userPass).catch(function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
            window.alert("Error : " + errorMessage);
        });
    };
});

I expected the code to work but whenever I press the button that calls the logIn function I get the following error message: "Uncaught ReferenceError: logIn is not defined at HTMLButtonElement.onclick". This clearly shows that turning my code into a self-calling function makes it not work anymore.

Answer 1

after I wrap it in a self-calling function

You haven't wrapped it in an IIFE. You've wrapped it in a function which is never called. To make it an IIFE you need to call it (eg with (whatever_you_want_assigned_to_the_$_argument) at the end).

I Googled a bit about it and saw that it is good practice to place the whole source file in a self-calling function

This is because globals are bad. (That's a generalisation).

Uncaught ReferenceError: logIn is not defined at HTMLButtonElement.onclick

Since you don't assign any event handlers in your code, presumably your HTML looks like:

onclick="logIn()"

You are trying to call logIn , as a global.

Now, since the whole point of using an IIFE is to stop using globals , that doesn't work.

Bind your event handlers with addEventListener , or (since you seem to be using jQuery) the jQuery wrapper around that instead.

 (function($) { function logIn(){ window.alert("pressed log in button"); } $("button#logIn").on("click", logIn); })(jQuery); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id=logIn>Log In</button>