✔ 最佳答案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewpoint" content="width=device-width" />
<style type="text/css">
td { text-align: center; }
</style>
<script type="text/javascript">
function calculate() {
var total = 0;
total += get_score("page1", "result1");
total += get_score("page2", "result2");
total += get_score("page3", "result3");
var total_grade = get_grade(total / 3);
document.getElementById("overall").innerHTML = total_grade;
}
function get_score(score_from, result_to) {
var score = parseInt(document.getElementById(score_from).value);
document.getElementById(result_to).innerHTML = get_grade(score);
return score
}
function get_grade(score) {
var result = "D";
if (score >= 90) {
result = "A";
} else if (score >= 80) {
result = "B";
}
return result;
}
</script>
</head>
<body>
<table>
<tr>
<td>卷一</td>
<td><input type="text" id="page1" size="5" maxlength="3" /></td>
<td>卷二</td>
<td><input type="text" id="page2" size="5" maxlength="3" /></td>
<td>卷三</td>
<td><input type="text" id="page3" size="5" maxlength="3" /></td>
</tr>
<tr>
<td colspan="6">
<button type="button" onclick="calculate()">查看成績</button>
</td>
</tr>
<tr>
<td colspan="6">結果</td>
</tr>
<tr>
<td colspan="2">卷一等級</td>
<td colspan="2">卷二等級</td>
<td colspan="2">卷三等級</td>
</tr>
<tr>
<td colspan="2">
<span id="result1"></span>
</td>
<td colspan="2">
<span id="result2"></span>
</td>
<td colspan="2">
<span id="result3"></span>
</td>
</tr>
<tr>
<td colspan="6">全科等級</td>
</tr>
<tr>
<td colspan="6"><span id="overall"></span></td>
</tr>
</table>
</body>
</html>