Tutorial: The Art of Passing Parameters in Javascript, Pt. 2
Continued from Part One...
 |
The Why and How of Passing Parameters
The art of passing parameters entails condensing all of that scripting down to one function. That's right-- we will be able to get our three buttons to change our background through the use of one function, rather than one new function for each additional button.We do this by first creating our function, then adding a variable inside the parentheses that come after it. (If you've ever wanted to know why functions are always followed by a pair of parentheses, now you know!)
For the sake of our tutorial, let's call this variable a plain ol' letter--
"x". However, keep in mind that it can be called whatever you like-- "color",
"changer", "a", "background", "z", etc.
<script language="javascript">Now what does this variable of "x" mean? It doesn't mean anything! All it is is an empty container that will eventually carry on whatever parameter we give it. If we wanted x to be "red", we could do that. If we wanted it to be "green", we could make it stand for that as well.
function changeColor(x) {
document.bgColor=x
}
</script>
But how do we do that? Well, let's return to the event handler
in our original button code:
<input type="button" value="red" onClick="changeColor()">If we clicked on this button, nothing would happen because we haven't yet told the x in our function what color to change the background to. So we add this to our code:
<input type="button" value="red" onClick="changeColor('red')">Are you getting the drift? ;-) When you click on the above button, the 'red' inside of the parenthesis passes to the function. The "x" becomes "red", and the document background is changed to red! So in a way, the code above means the same as this:
<script language="javascript">If we had decided to put 'green' or 'yellow' or 'purple' inside of the parentheses of the event handler, onClick="changeColor( )", then the x would have meant those as well. Because, as I said, the "x" is like an empty container that transforms into whatever parameter is passed to it.
function changeColor(x='red') {
document.bgColor='red'
}
</script>
The Point of Passing Parameters
Initially, you may think that this is just a cumbersome way of writing out this type of script. It would be if all we wanted to do was to change the background color of our web page to red. But now that we want to also change the background green and yellow, this method becomes handy.Why? Well, through this method we don't have to keep writing a new function for each button. We can now keep this one function, but simply add a new parameter inside the event handler attached to each button, which gets passed to it. Remember our code from the previous page-- the one where we created three separate functions for each button? Here is our amended code using the passing parameter method:
Code for buttons:
<input type="button" value="red" onClick="function changeColor('red')">Once again, script containing function:
// button that changes background red<input type="button" value="green" onClick="function changeColor('green')">
// button that changes background green<input type="button" value="click me!" onClick="changeColor('yellow')">
// button that changes background yellow
<script language="javascript">And voila-- three buttons for our background color changing script, with only one function to deal with, and all thanks to the art of passing parameters!
function changeColor(x) {
document.bgColor=x
}
</script>