Chapter 2 A JavaScript subset for jQuery users Add other enhancements 5. Change the calculateFV function from a function expression to a function declaration. Then, note that the application works the same as it did before. 6. Add a Clear Entries button below the Calculate button. To do that, copy the HTML for the label and input elements for the Calculate button, and paste it after the input element for the Calculate button. Then, modify the HTML for the Clear Entries button so it has a unique id and the right value attribute. 7. Add a function expression that clears the entries in the four text boxes, and assign it to a variable named clearEntries. Then, add a statement in the onload event handler that attaches the clearEntries function to the click event of the Clear Entries button. 8. Add a statement to the onload event handler that attaches the clearEntries function to the double-click event of the investment text box. Then, test this change. See what can happens when you remove strict mode 9. Change the next to last statement in the calculateFV function as follows so the variable name is misspelled as futurevalue instead of futureValue. var futurevalue = investment; for (vari=1;i years; i++)} futurevalue += futurevalue * rate /100; 3 futurevalue = futurevalue.tofixed (2); 10. Test this application with valid entries, and note that it doesn't work. Then, press F12 to display the developer tools, click on the Console tab, and see this error message: futurevalue is not defined Then, click on the link to the right of the message to go to the statement that causes the error. This shows that strict mode prevents the declaration of a variable without using the var keyword. 11. Delete the strict mode declaration, and test again. This time, the application works, but the result isn't rounded. That's because the JavaScript engine treated futurevalue as a new variable. 12. Restore the strict mode declaration and return the variable name to futureValue. Then, test again to make sure the application is working. Exercise 2-1 Enhance the Future Value In this exercise, you'll enhance the Fu' Do all of the testing for this exercise in Chrome. Then, if you have any problems as you test your enhancements, refer back to figure 1-15, which shows how to find JavaScript errors when you're using Chrome. Test the application 1. Open your text editor or IDE, and open these files: c: \jquery lexercises \ch 02\ future_value \index.html c: \jquery\exercises \ ch02 \ future_value \future_value.js Then, review the JavaScript code to see that it's the same as in figure 2-22. 2. Test this application in Chrome with valid data to see how it works. When you click the Calculate button, the correct result should be displayed. 3. Test the data validation routine by entering invalid data. Note that one error message is displayed in an alert dialog box no matter which entry is invalid. Enhance the data validation 4. Enhance the data validation so it displays a different error message for each type of entry: Investment amount must be >0 and 0 and 0 and
