Naming a function that loads on document ready

Question

I have got a .js file that adds functionality to a menu when the page loads (when document is ready) ... the first three lines of the file are...

( function( $ ) {
$( document ).ready(function () {
$('#cssmenul li.has-sub>a').on('click', function(){

After that there's loads more code that adds colours and other visual effects.

At the moment the function doesn't have a name - it just runs. However if I wanted to call the function from a button how do I name it? If called the function activateMenu I would then have a button like this:

<input type="button" value="Activate" onclick="activateMenu();">

Thanks very much

you can create `activateMenu()` outside your anonymous `.ready()` function area ... and then reference it.. — Doug, Jul 10 '19 at 13:23
so get rid of the document ready and replace it with the function? — epascarello, Jul 10 '19 at 13:23

score 1 · Accepted Answer · answered Jul 10 '19 at 13:24

1

If you want to reuse the code as activateMenu, then you can group the contents of that code into its own function and reference it inside your .ready()

(function($){
  $(document).ready(function(){
    activateMenu();
  });
})(jQuery);

function activateMenu(){
  console.log('test');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="activateMenu()">Test Button</button>

answered Jul 10 '19 at 13:24

Doug

1,435
1
12
26

Brilliant thank you - I was barking up completely the wrong tree. Solution is kind of obvious once it has been shown! Thanks again! – Ed Mozley Jul 10 '19 at 14:27

score 1 · Answer 2 · answered Jul 10 '19 at 13:24

create your function separately and the just pass the reference of it to the ready event, like this,

function doSomething(){
  // do whatever you want to do
  console.log('doing something')
}

// then
$( document ).ready(doSomething)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="doSomething()">click me</button>

Naming a function that loads on document ready

2 Answers2