The GTFs will assist you in solving the following problem. The JavaScript concepts that you will be focusing on are writing functions and passing parameters.
1. Copy this code into an HTML document: (Feel free to cut it from this document and paste it into a TextPad document)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Calculator </title>
</head>
<body>
<h1>
Area and Perimeter Calculator</h1>
<br />
<form name="areaForm" id="areaForm" action="">
<h3>Enter rectangle width </h3>
<input type="text" name="widthInputBox" id="widthInputBox"value="" />
<h3> Enter rectangle length </h3>
<input type="text" name="lengthInputBox" id="lengthInputBox" value="" />
<br /> <br />
<!-- When user clicks Calculate, the area and perimeter are calculated -->
<input type="button" value="Calculate" onClick=" " />
<hr />
<h3>Area</h3>
<input type="text" name="areaOutput" id="areaOutput" value="0" />
<h3>Perimeter</h3>
<input type="text" name="perimeterOutput" id="perimeterOutput" value="0" />
</form>
</body>
</html>
2. Add an onclick event handler (the code between the " " that will calculate the area and the perimeter and put them into the 2 appropriate fields when a user clidks on the Calculate button. Try out your code.
3. Modify your code so that when the user clicks the Calculate button, a function named "calc" is called and no parameters are passed. Be sure to put the appropriate JavaScript statements into "calc'. DON'T call the function "Calculate", since you already have a button named "Calculate". Try out your code.
4. Modify your code so that when the user clicks the Calculate button, a function named "calc" is called and the form is passed to the function. The function then calculates and outputs the area and the perimeter.
5. What you should have learned: