I'm really struggling to grasp the xhtml syntax involved in calling a function with an input button. Despite my efforts to find a clear explanation, this concept still eludes me.
Within the snippet of code from my book that I've been referencing, everything seems to work fine. However, there's one line that I just can't wrap my head around:
onclick="checkGrade(document.gradeForm.grade.value);"As far as I understand it, gradeForm refers to the form itself, and then grade represents the switch statement? So, if I had another switch statement named foo within the checkGrades function, would I use Foo? Additionally, I'm unsure about the purpose of the document or value parameters within the onClick checkGrade function.
Any guidance on this matter would be greatly appreciated!
<script type="text/javascript">
function checkGrade(grade) {
switch (grade.toUpperCase()) {
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("You did not enter a valid letter grade.");
break;
}
}
</script>
<p>Please enter your grade below:</p>
<form action="#" name="gradeForm">
<input type="text" name="grade" />
<input type="button" value="Check Grade" onclick="checkGrade(document.gradeForm.grade.value);" />
</form>