Calling Javascript function from external file when loading html page

Question

I want to load a function named james() from a Javascript file named hello.js which is added as an external file to index.html.

My problem is when the function james is declared inside $(document).ready(function()), it just says that 'james function is undefined' and is not called. How can I call function declared inside document.ready using onload?

<html>
<head>
</head>
<body onload= "james()">
         <script src=hello.js>
</body>
</html>

hello.js javascript file

function mountApp{

   $(document).ready(function(){

      function james(){
      alert("how can i get call ,when html page is loaded");
     }
 });
}

Hi @bbmac, I think that you need to add jquery into your HTML before hello.js script, since ready is a jquery function — Jorge
– Jorge, Commented Oct 8, 2018 at 12:45
The issue is because functions called from on* attributes need to be in global scope. It's partly for this reason they should be avoided. Just call james() from within the document.ready() (or $(window).on('load')) handler directly. — Rory McCrossan
– Rory McCrossan, Commented Oct 8, 2018 at 12:46

seema · Accepted Answer · 2018-10-08 13:00:33Z

1

true method is, you create function outside document.ready function and then call

function james()
{
  alert("how can i get call ,when html page is loaded");
}
$(document).ready(function(){
 james();
)};

answered Oct 8, 2018 at 13:00

seema

3541 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

draconisin · Accepted Answer · 2018-10-08 12:53:06Z

0

Your "james" function does not exist in the correct scope. It is declared inside the "ready" event listener and only exists inside the listener scope. After that, it won't be available anymore.

You cannot do what you are trying to do. Functions cannot be used outside of the scope they were declared in. Move the function to the global scope instead.

function mountApp{

   $(document).ready(function(){
     // You can call the function from here
     james();
   });
}

function james(){
  alert("how can i get call ,when html page is loaded");
}

Now, I don't see why you would be adding an event listener "onready" inside a function, because function calls will only be executed after the DOM is ready, so it will never trigger.

answered Oct 8, 2018 at 12:53

draconisin

161 silver badge2 bronze badges

1 Comment

Quentin Over a year ago

"function calls will only be executed after the DOM is ready" — As a general statement, that isn't true. Function calls will be executed whenever they happen. In this particular case, the function call is done in the load event handler, so that call will wait until after the DOM is ready.

Collectives™ on Stack Overflow

Calling Javascript function from external file when loading html page

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related