Passing Argument
It would be rather limiting if your functions could only behave in an identical fashion each and every time they were called, as would be the case in the preceding example.
Fortunately, you can extend the capabilities of functions a great deal by passing data to them. You do this when the function is called, by passing to it one or more arguments:
functionName(arguments)
Let’s write a simple function to calculate the cube of a number and display the result:
function cube(x) {
alert(x * x * x);
}
Now we can call our function, replacing the variable x with a number. Calling the function like the following results in a dialog box being displayed that contains the result of the calculation
cube(3);
Of course, you could equally pass a variable name as an argument. The following code would also generate a dialog containing the number 27:
var length = 3;
cube(length);
Multple Argument
Functions are not limited to a single argument. When you want to send multiple arguments to a function, all you need to do is separate them with commas:
function times(a, b) {
alert(a * b);
} times(3, 4); // alerts '
12'
You can use as many arguments as you want.
Try it Yourself: A Function to Output User Messages
function buttonReport(buttonId, buttonName, buttonValue) {
// information about the id of the button
var userMessage1 = "Button id: " + buttonId + "\n";
// then about the button name
var userMessage2 = "Button name: " + buttonName + "\n";
// and the button value
var userMessage3 = "Button value: " + buttonValue;
// alert the user
alert(userMessage1 + userMessage2 + userMessage3);
}
The function buttonReport takes three arguments, those being the id, name, and value of the button element that has been clicked. With each of these three pieces of information, a short message is constructed. These three messages are then concatenated into a single string, which is passed to the alert() method to pop open a dialog containing the information.
Calling a Function with Multiple Arguments
<!DOCTYPE html>
<html>
<head>
<title>Calling Functions</title>
<script>
function buttonReport(buttonId, buttonName, buttonValue) {
// information about the id of the button
var userMessage1 = "Button id: " + buttonId + "\n";
// then about the button name
var userMessage2 = "Button name: " + buttonName + "\n";
// and the button value
var userMessage3 = "Button value: " + buttonValue;
// alert the user
alert(userMessage1 + userMessage2 + userMessage3);
}
</script>
</head>
<body>
<input type="button" id="id1" name="Left Hand Button" value="Left"
onclick ="buttonReport(this.id, this.name, this.value)"/>
<input type="button" id="id2" name="Center Button" value="Center"
onclick ="buttonReport(this.id, this.name, this.value)"/>
<input type="button" id="id3" name="Right Hand Button" value="Right"
onclick ="buttonReport(this.id, this.name, this.value)"/>
</body>
</html>
