HTML and CSS Reference
In-Depth Information
To Enter an onClick Event Handler to Call the CalcLoanAmt() Function
The last step in validating the mortgage loan payment calculator is to add an event handler to invoke the
CalcLoanAmt() function when the user clicks the Calculate button. After entering all the data in the form, a user
clicks the Calculate button, which triggers the CalcLoanAmt() function to validate the interest rate and number
of years data entered in the form. The following step enters the onClick event handler to call the CalcLoanAmt()
function.
1
onClick event handler
activates CalcLoanAmt()
function when user clicks
Calculate button
•
Scroll down to the
HTML code for the
form and then click
line 174 right after
the closing quote
in “Calculate” and
before the right-
most /> bracket.
do not press
the
e n t e r
key
•
Press the
s p a c e b a r
once.
Figure 10-22
•
onClick=
”CalcLoanAmt()”
to add the event handler to the Calculate button, but do not press
the
e n t e r
key (Figure 10-22).
Type
To Save an HTML File and Test a Web Page
With the JavaScript code for the form validation entered, the Web page can be saved
and tested in a browser. The CalcLoanAmt() function will validate the text field entries, but
will not yet calculate the monthly payment. The following steps save the HTML file and
test the Web page. Do not continue until this code is working properly.
1
With the USB drive plugged into your computer, click File on the menu bar, and then
click Save.
2
Click the browser button on the taskbar.
3
Click the Refresh button on the Address bar.
4
When the Web page is displayed, click the Sales Price text field.
5
Enter the test data set 1, as shown in Table 10-16 on the next page, pressing the
t a b
key
to move to the next text field.
6
When an error message appears, click the OK button, and enter a valid number for the
missing data.
7
When you have entered the test data set 1, click the Calculate button at the bottom of
the form.
8
After completing a set of data, click the Reset button at the bottom of the form.
9
Repeat Steps 5 through 8, using test data sets 2, 3, and 4, as shown in Table 10-16, and
respond to any error messages. Figure 10-23 on the next page shows the fourth data set
with the error message.
