External Value of a Function
As you can see in the previous functions, functions have parentheses next to their names both when they are defined and when they are called. If the function does not receive any external information to work, these brackets are empty when defining and calling.
Sometimes, they are asked to perform the operations inside the functions according to the data that will be sent to them from outside the function. In this case, the information that the function will receive is specified in these parentheses.
If you examine the example on the right, you will see that when 4 separate links in the body part are clicked, they call the same function. However, when each link is clicked, it sends a different value to the function.
If you examine the function in the head section, you will see that a variable name is written in parentheses while defining it. Here, the value sent to the function is taken to this variable by the function, and the operations within the function are done using this variable as well.
Functions can take more than one external value. In this case, the names of the variables are written with a comma between them and the data is sent according to the order here when called.
For example;
calculate function(name, surname, number, class)
A function defined as
calculate("Jack", "London", 1111, "11E")
can be called as.
*** If such a function is to be called by an html element in the body part, care must be taken in the following: The textual data sent when calling the function must be enclosed in quotation marks. But if the function is to be called depending on an event, for example onclick event, the inside quotes should be written as single quotes since the onclick parameter already has quotes. So it should be called like this:
onclick="calculate('Jack', 'London', 1111, '11E')"
javascript function parameters, javascript examples of functions that get values from outside, create methods that get values from outside
EXERCISES
Changing Text Color with a Function Taking External Value
|
Try It
|
By clicking the Try It Yourself button, you can change the codes and see the result.
function color(a)
{
document.getElementById("text").style.color=a;
document.getElementById("text").style.border="1px solid " + a;
}
Html Section:
<p>
<a href="#" onclick="color('red')">Red</a>
<a href="#" onclick="color('yellow')">Yellow</a>
<a href="#" onclick="color('green')">Green</a>
<a href="#" onclick="color('blue')">Blue</a>
</p>
<p id="text">The color of the text and border will change here.</p>
Read 709 times.