いくつかの個々の成績を指定して最終成績を計算し、その結果を html ページに出力する JS コードを書いていますが、イベントと関数をトリガーすると、残りのコードに到達することなく for ループで 1 回だけループします (チェックしたprint ステートメントを使用しています) が、コードの残りの部分に到達できないループの何が問題なのかわかりません。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Problem 2</title>
<script src="grades.js" type="text/javascript"></script>
</head>
<body>
<h1>Grade Calculator</h1>
<form id ="myForm">
<div id="assignments">
HW <input type="text" size="1"/> / <input type="text" size="1"/><br/>
HW <input type="text" size="1"/> / <input type="text" size="1"/><br/>
HW <input type="text" size="1"/> / <input type="text" size="1"/>
</div>
<div>
<input type="checkbox" id="curve"/> Curve +5?
</div>
<div id="resultsarea">
<p>
<!--add buttons here -->
<button type="button" id="comp">Compute</button>
<button type="button" id="clr">Clear</button>
</p>
<!-- add results here -->
</div>
</form>
</body>
</html>
JS:
window.onload = pageLoad;
function pageLoad()
{
var cbutton = document.getElementById("comp");
cbutton.onclick = compute;
}
function compute()
{
var list = document.getElementsByTagName("input");
var marks = 0;
var total = 0;
for (var i=1; i <= list.length; i++)
{
if(list[i].type == "text")
{
if (i%2 != 0)
marks += list[i].value;
else
total += list[i].value;
}
}
var result = Math.round(marks/total);
if (document.getElementById("curve").checked)
result += 5;
var out = document.createElement("div");
var t = document.createTextNode(result);
out.appendChild(t);
var display = document.getElementById("resultsarea");
display.append(out);
}