how to call a javascript function from another javascript?

Question

how can i call webService() from one in another script when they are in the same html file.

first script that call method from second script

<script type="text/javascript">
    function validate(){
       //validate body
       //how to call webService() here;
    }
</script>

second script

<script type="text/javascript">
    function webService(){ 
       //WEB SERVICE FUNCTION BODY
    }
</script>

html :

<input type="button" value="Login" id="loginButton" onclick="validate();">

You have to include the script you want to use _before_ the script that calls it. — Benjamin Gruenbaum, Jan 04 '15 at 13:11
how can i include can you tell me the syntax? because both are in the same html file. — Miss Unique, Jan 04 '15 at 13:18
take a look at http://www.w3schools.com/tags/att_script_src.asp — Mostafa Armandi, Jan 04 '15 at 13:23
both scripts are in the same index.html file so how can i use this because they dont have their names.js — Miss Unique, Jan 04 '15 at 13:28
It should work like this... Could you precise the entire code of your HTML page ? — romainsalles, Jan 04 '15 at 13:33

score 1 · Answer 1 · answered Jan 04 '15 at 13:30

What you could do is use a global wrapper arround functions

<html>
  <head>
    <script type="text/javascript">
      function validate(){
        alert("calling Script1")
        if(WRAPPER) WRAPPER.webService()
      }
    </script>
  </head>
  <body>
    <script type="text/javascript">
      var WRAPPER = {}
      WRAPPER.webService = function(){ 
        alert("Script1")
      }
    </script>
    <input type="button" value="Login" id="loginButton" onclick="validate();">
  </body>
              
</html>

Although if the function is called directly from the head, the script at the body would not have loaded. You might need to wrap validate() around

document.addEventListener('DOMContentLoaded', function() {
     validate()
  }, false);`

This is not what the OP asked. This is good coding practice however. The OP runs the code from a click event on the input. If all is good the script is parsed before the input is clickable. — Mouser, Jan 04 '15 at 13:36

score 0 · Answer 2 · answered Jan 04 '15 at 13:32

The same way you would normally call a javascript function. Benjamin Gruenbaum states you should declare the function webService before the validate function.

<script type="text/javascript">
    function webService(){ 
       //WEB SERVICE FUNCTION BODY
    }
</script>

<script type="text/javascript">
    function validate(){
       //validate body
       webService();
    }
</script>

score 0 · Answer 3 · answered Jan 04 '15 at 13:33

0

Usually you would put the code in two different js files and include the webService before the validate, which would make the one function available before the other.

<body>
    // other code
    <script src="scriptWithWebService.js"></script>
    <script src="scriptWithValidate.js"></script>
</body>

answered Jan 04 '15 at 13:33

Michael K.

535
6
21

In this particular case this should't matter. `validate` and `webservice` are both functions and are not run on page initialization. So no scope problems here. Both function should be availabe when the onclick event on the input is raised by a user. – Mouser Jan 04 '15 at 13:38

score 0 · Answer 4 · edited May 23 '17 at 10:26

This has everything to do with scope. All Javascript elements are parsed in sequence. First the ones in the head and then the ones in the body. Functions are parsed first and aren't executed when they are defined. Declarations and function calls are executed afterwards. example:

<script>
    runCode();
    function runCode()
    {
        alert(1);
    }
</script>

Will work, since the function runCode is defined first while parsing, however this example will fail:

<script>
    runCode();
</script>

<script>
    function runCode()
    {
        alert(1);
    }
</script>

This will fail, runCode is called before it's defined, since the second script block isn't parsed yet. The following example will work:

<script>
    function runCode()
    {
       runUpdate()
    }
</script>

<script>
     function runUpdate()
     {
        alert(1);
     }
     runCode();
</script>

Even though runUpdate isn't defined when runCode is parsed it will not raise an undefined error since the content of the function isn't executed until called upon.

So at the end of the document loading, all the Javascript is parsed into a global scope. (Or simplified: it's put onto one big pile).

So when the document is loaded the code looks like this:

    function validate(){
       //validate body
       //how to call webService() here;
    }

    function webService(){ 
       //WEB SERVICE FUNCTION BODY
    }

and your input with click event can call upon validate() and validate can call upon webservice because there both defined.

how to call a javascript function from another javascript?

4 Answers4