Free Javascript Tutorials

home

JavaScript Tutorials

Functions continued

 
Our quick javascript links
Little Programmes
 
 
 
 
 
 

 

Calling other functions within a function

 

Functions can call other functions, and have a value passed back to the calling line. We'll see how that works now. Once you have grasped the concept, what we're then going to do is write code to validate data that a user might enter on a form.

First, though, here's an example of a function being called inside another function. To test it out, create a web page with a button on it. Set the onClick event for the button to this:

onClick = GetValue()

Once you have your web page with a button on it, add this code to the HEAD section of the page:

<Script language = JavaScript>

function GetValue() {

returnvalue()
}

function returnvalue() {

n1 = 10
n2 = 5
answer = n1 - n2
return false
}

</SCRIPT>

When the button on your page is clicked, it calls the function GetValue(). The only line of code in the GetValue() function calls the second function:

returnvalue()

When this second function is called, all the code inside it is executed. Control then passes back to the first function. Any other lines for the first function are then executed.

Notice the line of code that reads return false. We really should have had this return word at the end of all our functions. It's actually a question: "Does the function return a value?" In other words, Are we finished with this function or not?

If the function does return a value you can either use return true, or more likely you can return a value back to the first function. In our second function, we were subtracting one number from another and putting the answer into a variable called answer. But we weren't doing anything with this variable, so nobody would be able to see what the answer was. In this next example, we'll return the answer to the first function:

function GetValue() {

total = returnvalue()
alert(total)
}

function returnvalue() {

n1 = 10
n2 = 5
answer = n1 - n2
return answer
}

The first function now does something slightly different. The call to the second function, returnvalue(), has gone on the right hand side of an equals sign (= ). On the left hand side of the equals sign we have a variable called total. What we're saying here is "Assign the value of returnvalue() to the total variable."

But the same thing happens: the second function is called and has its code executed. However, we've now told the second function to return a value:

return answer

And what's inside the answer variable? The answer to the sum 10 - 5. This is the value that gets passed back to the calling line, which was:

total = returnvalue()

Now the variable total will hold the value from the function. Finally, we've displayed the result in an alert box. Run the code and see how it works.

 

Passing values to a function

When we called the second function above, we didn't pass any values to it. The round brackets of our function were entirely empty:

total = returnvalue()

They were empty because the second function accepted no arguments. Here's the same code again, but this time the second function does accept an argument. In fact, it accepts two arguments:

function GetValue() {

total = returnvalue(10, 2)
alert(total)
}

function returnvalue(num1, num2) {
answer = num1 - num2
return answer
}

The function returnvalue() is now this:

returnvalue(num1, num2)

We've set up two variable inside the round brackets called num1 and num2. When we call the second function from the GetValue() function we put something into those two variables:

total = returnvalue(10, 2)

Now, the numbers 10 and 2 will be passed to the second function. These values will be stored in the two variables. The 10 will be stored in num1 and the 2 will be stored in num2.

Once the values are in the second function, you can do something with them. All we did was subtract one from the other, and stored the result in the variable answer. The value in answer was then returned to the calling line:

return answer

OK, now you know how to call function, and have one function call anther, we can do some work on form validation.

Move on to the Next Part-->

<--Back to the JavaScript Contents Page