How can I make a function which executes on page loading?

Question

I have a JS function that I need to execute it when page loads. Here is the function:

function myfunc(){
    alert('something');
}

Noted that I also need to have a name for it. Because I need to call it after page loading again (on click of a element).

So in short, I need to define a function which executes both on page loading and when user click on $('.myclass') element. How can I do that?

Possible duplicate of [How do I call a JavaScript function on page load?](http://stackoverflow.com/questions/3842614/how-do-i-call-a-javascript-function-on-page-load) — roberrrt-s, Sep 05 '16 at 11:55
You can use two event listeners https://api.jquery.com/click/ https://api.jquery.com/ready/ — Kapitula Alexey, Sep 05 '16 at 11:55

score 4 · Accepted Answer · answered Sep 05 '16 at 11:54

4

Put the call to that function in both the click handler for the .myclass elements, and also directly in a script tag, right before the </body>. Something like this:

<script>
    $(function() {
        $('.myclass').click(myfunc); // on click
    });

    myfunc(); // on load
</script>

answered Sep 05 '16 at 11:54

Rory McCrossan

331,213
40
305
339

When you say *right before the `
`*, why would you even add a ready state around?
– eisbehr Sep 05 '16 at 11:58
@eisbehr because habit :) but you're right, that wouldn't technically be needed either. – Rory McCrossan Sep 05 '16 at 11:58
@eisbehr Do you mean `$(function() {` is redundant ? – Martin AJ Sep 05 '16 at 12:00
When placing the script right before `
` it can be omitted, yes
– Rory McCrossan Sep 05 '16 at 12:00
Just for my information, if I want to write your script after `
`, do I need to write it `$(function() {`? why?
– Martin AJ Sep 05 '16 at 12:05
1

Putting it there is invalid. The ` – Rory McCrossan Sep 05 '16 at 12:59

score 2 · Answer 2 · answered Sep 05 '16 at 12:10

Try below code, It calls Click me on load and on button click as well. Hope this helps

$(document).ready(function() {
  console.log('document load')
  clickMe();
});
$('.button').click(function(){
clickMe();
});
function clickMe(){
  console.log('Clicked');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" > click me</button>

score 1 · Answer 3 · answered Sep 05 '16 at 12:18

1

how about <body onload="myfunc()"> and your function in the <head> element:

<script>
function myfunc(){
    alert('something');
}
</script>

and then to call it from button

<button onclick="myfunc()">Click me</button>

answered Sep 05 '16 at 12:18

hanumanDev

6,592
11
82
146

How can I make a function which executes on page loading?

3 Answers3