Utilize a function from a separate JavaScript file by calling it within the $(document).ready(function()

Question

Utilize a function from a separate JavaScript file by calling it within the $(document).ready(function()

Refer to this post for more information: Click here

I attempted to access a function that was defined in another .js file based on the instructions from the post. However, I encountered an issue. Take a look at my code below:

sildemenu.js

$(document).ready(function() {
    var window.slideMenu=function(){
        //perform actions here 
    }();
});

control.js

$(document).ready(function() {
    $('#foo').on('click', function() {
         window.slideMenu();
    });
});

I received the error message "Object [object Window] has no method 'sildeMenu'." This is challenging for me as a beginner programmer. Any assistance would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

An attempt to define a complex variable has been made, which is not the correct way as it is impossible. Instead, assign a value to the global object known as window.

  window.slideMenu=function(){
    //do something here 
  }();

Remove the unnecessary var and extra code for improvement. The corrected version should look like this:

window.slideMenu=function(){
    //do something here 
};

Answer 2

An attempt to define a complex variable has been made, which is not the correct way as it is impossible. Instead, assign a value to the global object known as window.

  window.slideMenu=function(){
    //do something here 
  }();

Remove the unnecessary var and extra code for improvement. The corrected version should look like this:

window.slideMenu=function(){
    //do something here 
};

Answer 3

Answer №2

To implement a slide menu without using the window object, follow these steps:

sildemenu.js

$(document).ready(function() {
    slideMenu=function(){
      //Add your custom code here!
    };
});

control.js

$(document).ready(function() {
    $('#foo').on('click', function() {
         slideMenu();
    });
});

Answer 4

To implement a slide menu without using the window object, follow these steps:

sildemenu.js

$(document).ready(function() {
    slideMenu=function(){
      //Add your custom code here!
    };
});

control.js

$(document).ready(function() {
    $('#foo').on('click', function() {
         slideMenu();
    });
});

Utilize a function from a separate JavaScript file by calling it within the $(document).ready(function()

Answer №1

Answer №2

Similar questions

JavaScript XML Serialization: Transforming Data into Strings

Angular.js image slider display for viewing photos

The Javascript function will only initiate upon a manual reload of the page

The div containing the background image does not resize properly when using media queries

Issue with header background images not showing up in Safari browser

Incapable of retrieving data from MongoDB due to a failure in fetching results using streams in Highland.js

Ways to center a div with position:relative vertically on the page

The POST response I received was garbled and corrupted

Check input validations in Vue.js when a field loses focus

Using async/await with Axios to send data in Vue.js results in different data being sent compared to using Postman

Issues with validating the Google Maps API JavaScript tag

Having trouble selecting an element by name that contains a specific string followed by [..] using jQuery

Can data be transferred from node.js express to front-end HTML without requiring a page refresh?

Why do they call me the Commander of Errors?

Do not refresh the ajax content

Tips for aligning Jqplot Bar Chart point labels vertically

Requirements for adding information to a database table

Instructions for selecting all checkboxes in an HTML table with just one click

The Axios GET call encountered an error with a status code of 404

Utilizing a background image property within a styled component - Exploring with Typescript and Next.js