SCRIPTING THE WEB – PART 1 -

INTRODUCTION TO JAVASCRIPT – EXERCISE 4 – PASSING AN ARGUMENT TO A FUNCTION

The changeFontSize() function is rather inflexible because the ID of the fruits unordered list is hard-coded into the first line. To reuse it with other elements, you need to pass the ID as an argument to the function.

  1. You will use the previously created folder in your MySites folder called Scripting the Web - Part 1.
  1. If necessary, define a new Dreamweaver site called Scripting the Web - Part 1and set the root folder as the Scripting the Web - Part 1folder.
  1. Continue working with change_05.html, but save the file immediately as change_06.html.
  1. Type id between the parentheses of changeFontSize() in the function definition. This tells the function to expect an argument (or parameter) called id. A parameter is similar to a variable, so it's not wrapped in quotes and follows the same naming rules as a variable.
  1. In the first line inside the function definition, delete 'fruits' between the parentheses of getElementById(), and replace it with id. Make sure you delete the quotation marks, because id is being used as a variable to represent the value passed as an argument to the function.

The first two lines of the function definition should look like this:

function changeFontSize(id) {

var list = document.getElementById(id);

This has the effect of passing to getElementById() whatever value is passed as the argument to changeFontSize().

  1. Type 'fruits' between the parentheses of changeFontSize() in the link that triggers the onClick event.

The link should look like this:

<a href="javascript:;" onClick="changeFontSize('fruits')">

Note: The onClick attribute wraps changeFontSize() in double quotes, so you must use single quotes around fruits. When using quotes inside a string, you should always use the opposite type to the outer pair of quotes. Otherwise, the code will break. If you can't avoid using the same type of quotes, inner quotes should be preceded by a backslash.

  1. Save the web page change_06.html, and test it. The function works the same as before.
  1. Delete the "s" at the end of fruits, save the page, and test it again. It no longer works, because the function can't find an element with the ID fruit.
  1. Restore the "s" at the end of fruits, and save the page.

Your code should appear as shown below:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Changing Font Size</title>

<script>

function changeFontSize(id) {

var list = document.getElementById(id);

if (!list.style.fontSize || list.style.fontSize == '16px') {

list.style.fontSize = '20px';

} else {

list.style.fontSize = '16px';

}

}

</script>

</head>

<body>

<h1>A Fascinating List</h1>

<ul id="fruits">

<li>Apples</li>

<li>Pears</li>

<li>Oranges</li>

</ul>

<p<a href="javascript:;" onClick="changeFontSize('fruits')">Change list font size</a>.</p>

</body>

</html>

A - Scripting the Web - Part 1 - Introduction to JavaScript - Exercise 4 - Passing an Argument to a Function Page 1 of 2 Version 1