In This Project, You Will Create and ﬁx a Document with a Simple Form

In this project, you will create and ﬁx 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:

/* <![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 state-

ment are not contained within braces. Modify the switch

statement 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 miss-

ing a closing parenthesis. Add the closing parenthesis to each

of the window.alert() statements, between the closing quo-

tation 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 deﬁned. The prob-

lem that causes this error is that the checkGrade() function def-

inition 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 deﬁnition, 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 let-

ter!” 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