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();">
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);`
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>
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>
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.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.
