JavaScript nested function "invalid function"

Question

JavaScript nested function "invalid function"

Recently, I've encountered an issue with a JavaScript file that I'm including on my page. Here's a summary of the situation:

var PageTransitions = (function() {

    function setCurrent(currentSet) {
        alert(currentSet);
    }

    function nextPage(options, direction, gotopage) {
        //contains some relevant code
    }
})();

When using:

PageTransitions.nextPage(x, x, x);

Everything works perfectly fine. However, attempting to utilize

PageTransitions.setCurrent(x);

results in an error message stating "PageTransitions.setCurrent is not a function"

I can't seem to figure out why this is happening, as I believe the syntax is correct. Although I can't share the actual webpage due to work restrictions, our senior developer has reviewed it and confirmed that it should be working. Do you have any insights into what might be causing this issue?

I've tried calling setCurrent after the JavaScript file loads and even moved it after nextPage just to double-check. Interestingly, while nextPage functions properly, setCurrent continues to be unrecognized.

I also attempted renaming both setCurrent itself and the variable being passed to it, but unfortunately, that didn't resolve the problem either.

javascript

Answer 1

Answer №1

If you plan on linking functions together, it's important to use properties rather than just defining functions inside another function. One of the simplest ways to do this is by using an object literal.

var PageTransitions = {
    setCurrent : function(currentSet) {
        alert(currentSet);
        return this;
    },
    nextPage : function(options, direction, gotopage) {
        //some working code, not important
        return this;
    }
}

PageTransitions.nextPage(x, x, x);

Alternatively, if the IIFE serves a purpose, you can return an object literal as well.

var PageTransitions = (function() {
    function setCurrent(currentSet) { ... }
    function nextPage(options, direction, gotopage) { ... }

    return {setCurrent, nextPage};
})();

Answer 2

If you plan on linking functions together, it's important to use properties rather than just defining functions inside another function. One of the simplest ways to do this is by using an object literal.

var PageTransitions = {
    setCurrent : function(currentSet) {
        alert(currentSet);
        return this;
    },
    nextPage : function(options, direction, gotopage) {
        //some working code, not important
        return this;
    }
}

PageTransitions.nextPage(x, x, x);

Alternatively, if the IIFE serves a purpose, you can return an object literal as well.

var PageTransitions = (function() {
    function setCurrent(currentSet) { ... }
    function nextPage(options, direction, gotopage) { ... }

    return {setCurrent, nextPage};
})();

Answer 3

Answer №2

If

PageTransitions.nextPage(x, x, x);

is functioning properly, it's not because of the code you provided originally.

In order for PageTransitions to have access to it, you must return the functions:

var PageTransitions = (function() {

    function setCurrent(currentSet) {
        alert(currentSet);
    }

    function nextPage(options, direction, gotopage) {
        //some functionality here, not crucial
    }

    return {
        setCurrent: setCurrent,
        nextPage: nextPage
    };
})();

At this point, PageTransitions.setCurrent has been defined.

Answer 4

If

PageTransitions.nextPage(x, x, x);

is functioning properly, it's not because of the code you provided originally.

In order for PageTransitions to have access to it, you must return the functions:

var PageTransitions = (function() {

    function setCurrent(currentSet) {
        alert(currentSet);
    }

    function nextPage(options, direction, gotopage) {
        //some functionality here, not crucial
    }

    return {
        setCurrent: setCurrent,
        nextPage: nextPage
    };
})();

At this point, PageTransitions.setCurrent has been defined.

Answer 5

Answer №3

(function() {

    function displayCurrent(currentItem) {
        alert(currentItem);
    }

    function moveForward(options, direction, pageNumber) {
        // This code performs some operations
    }

    var obj = {};  // Temporary object

    // Assigning functions to properties of the local object
    obj.displayCurrent = displayCurrent; 
    obj.moveForward = moveForward;

    // Making the temporary object accessible globally
    window.Transitions= obj;

})();

// Usage example:
Transitions.displayCurrent("sample");
Transitions.moveForward();

Answer 6

(function() {

    function displayCurrent(currentItem) {
        alert(currentItem);
    }

    function moveForward(options, direction, pageNumber) {
        // This code performs some operations
    }

    var obj = {};  // Temporary object

    // Assigning functions to properties of the local object
    obj.displayCurrent = displayCurrent; 
    obj.moveForward = moveForward;

    // Making the temporary object accessible globally
    window.Transitions= obj;

})();

// Usage example:
Transitions.displayCurrent("sample");
Transitions.moveForward();

JavaScript nested function "invalid function"

Answer №1

Answer №2

Answer №3

Similar questions

The Facebook Like Button appears on Firefox but not on Internet Explorer due to Javascript errors

Is there a way to retrieve all active HTTP connections on my Express.js server?

Guide on converting this function into a computed property within Vue

Guide on utilizing map function in JavaScript and Vue to generate a fresh array

issue with brightcove player's complete event not triggering upon video replay

Are you looking for straightforward dynamic directives that come with dynamic controllers and a scope?

My Node/Express application is failing to recognize updates made to my Pug view files

Issue encountered during installation of the robotjs npm package

Is it considered acceptable to utilize a v-model's value as the basis for an if-statement?

Struggling to get Angular to properly sanitize inputs using ng-bind-html

Adjust the size of an image with jquery without relying on server-side scripts

The compilation of the module has encountered an error with the PostCSS loader. There is a SyntaxError at line 2, character 14 indicating an unknown

Getting the name and value from an object

retrieval: unspecified information obtained through body parsing (Node.js Express)

Internet Explorer does not recognize window.opener.location as valid, while there are no issues with Chrome

Unreachable prevState when utilizing the useState hook

variable identifier looping through elements

Retrieve the text value of a selected option in a v-select component

Tips for personalizing the error message displayed on Webpack's overlay

Can a webpage be sent to a particular Chromecast device without using the extension through programming?