In this project, you will create and fix a document with a simple form that displays the value of a letter grade.
1. Create a new document in your text editor.
2. Type the <!DOCTYPE> declaration, <html> element, document head, and <body> element. Use the Transitional DTD and “Letter Grades” as the content of the <title> element.
3. Create a script section in the document head that includes the
following checkGrade() function and switch statement:
<script type="text/javascript">
/* <![CDATA[ */
function checkGrade() {
switch (grade)
case "A":
window.alert("Your grade is excellent.";
break;
case "B":
window.alert("Your grade is good.";
break;
case "C":
window.alert("Your grade is fair.";
break;
case "D":
window.alert("You are barely passing.";
break;
case "F":
window.alert("You failed.";
break;
default:
window.alert("Invalid letter!";
}
/* ]]> */
</script>
4. Add the following form to the document body that includes an onclick event handler that calls the checkGrade() function. The value of the single text box is passed to the checkGrade() function.
<form action=""
enctype="application/x-www-form-urlencoded">
<p><input type="text" name="grade" />
<input type="button"
value="Check Grade"
onclick="checkGrade(this.value);" /></p>
</form>
5. Save the document as LetterGrades.html in the Exercises folder for Chapter 8, and then open it in your Web browser.
You should receive an error message about a missing brace.
The problem is that the statements within the switch statement are not contained within braces. Modify the switchstatement so that it includes braces, as follows:
switch (grade) {
case "A":
window.alert("Your grade is excellent.";
break;
case "B":
window.alert("Your grade is good.";
break;
case "C":
window.alert("Your grade is fair.";
break;
case "D":
window.alert("You are barely passing.";
break;
case "F":
window.alert("You failed.";
break;
default:
window.alert("Invalid letter!";
}
6. Save the LetterGrades.html document, and reload it in your Web browser window. You should receive another error
message about a missing closing parenthesis. Each of the window.alert() statements in the switch statement is missing a closing parenthesis. Add the closing parenthesis to each of the window.alert() statements, between the closing quotation mark and the semicolon.
7. Save the LetterGrades.html document, and reload it in your Web browser window. You should not receive any more error
messages when you reload the page. However, if enter a grade into the text box and click the Check Grade button, you will see an additional error about “grade” not being defined. The prob-
lem that causes this error is that the checkGrade() function definition does not include the grade parameter, which is used in the switch statement to evaluate the letter grade. Add the grade
parameter to the checkGrade() function definition, as follows:
function checkGrade(grade) {
...
8. Save the LetterGrades.html document, and reload it in your Web browser window. Try entering a valid grade into the text box and clicking the Check Grade button. No matter what
value you enter, you will always see the message “Invalid letter!” in the alert box. The problem that is causing this error
is that the button element, which calls the checkGrade() function, is incorrectly passing a value to the function of this.value. The value of the grade text box, not the value of the button, must be passed to the checkGrade() function.
Modify the argument that is passed to the checkGrade() function, as follows:
onclick="checkGrade(document.forms[0].grade.value);"
9. Save the LetterGrades.html document, and then validate the document with the W3C Markup Validation Service. Once the document is valid, close it in your text editor and reload it
in your Web browser window. The script should now function correctly.
10. Close your Web
