I have a table with dynamic html that contains drop down select lists
and readonly text boxes. Dynamic calculations are done on change of a
value in one of the drop down select lists.
Using Safari,my first iteration the script works fine ( indicating that
there
are 33 form variables ). When trying another dropdown select value, the
form elements.length is shown as 33 ( as about ) BUT the script then
crashes with a 'null value' error. I cannot access any of the form
variables - this works in all other browsers and platforms.
Anyway ideas would be great appreciated...
Cheers
<HTML>>my html page - SAVE AND RUN IN BROWSER>>
<HEAD>
<TITLE>GPA Estimator</TITLE>
<STYLE>
..ie {visibility:hidden}
..ns {visibility:hide}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
// grade object constructor
function grade(grade, honorPoints, creditAttempt, creditEarned,
creditGPA, showable, editable) {
this.grade = grade;
// String
this.honorPoints = honorPoints; // float
this.creditAttempt = creditAttempt; // boolean
this.creditEarned = creditEarned; // boolean
this.creditGPA = creditGPA; //
boolean
this.showable = showable; //
boolean
this.editable = editable; //
boolean
}
gradeList = new Array();
gradeList[0] = new grade("No
grade", 0, false, false, false, true, true);
gradeList[1] = new grade("A", 4, true, true,
true, true, false);
gradeList[2] = new grade("A-", 3.7, true, true,
true, true, false);
gradeList[3] = new grade("B+", 3.3, true, true,
true, true, false);
gradeList[4] = new grade("B", 3, true, true,
true, true, false);
gradeList[5] = new grade("B-", 2.7, true, true,
true, true, false);
gradeList[6] = new grade("C+", 2.3, true, true,
true, true, false);
gradeList[7] = new grade("C", 2, true, true,
true, true, false);
gradeList[8] = new grade("C-", 1.7, true, true,
true, true, false);
gradeList[9] = new grade("D", 1, true, true,
true, true, false);
gradeList[10] = new grade("F", 0, true, false,
true, true, false);
gradeList[11] = new
grade("AU", 0, false, false, false, false,
false);
gradeList[12] = new grade("H", 0, true, true,
false, false, false);
gradeList[13] = new grade("J", 0, true, false,
false, false, false);
gradeList[14] = new grade("MG", 0, false, false,
false, true, true);
gradeList[15] = new
grade("NC", 0, false, false, false, false,
false);
gradeList[16] = new grade("P", 0, true, true,
false, false, false);
gradeList[17] = new grade("W", 0, true, false,
false, false, false);
gradeList[18] = new grade("X", 0, false, false,
false, true, true);
gradeList[19] = new grade("I", 0, false, false,
false, true, true);
function getHonorPoints(grade) {
for (var i = 0; i < gradeList.length; i++) {
if ( gradeList[i].grade == grade) {
return gradeList[i].honorPoints;
}
}
}
function isCreditAttempt(grade) {
for (var i = 0; i < gradeList.length; i++) {
if ( gradeList[i].grade == grade) {
return gradeList[i].creditAttempt;
}
}
}
function isCreditEarned(grade) {
for (var i = 0; i < gradeList.length; i++) {
if ( gradeList[i].grade == grade) {
return gradeList[i].creditEarned;
}
}
}
function isCreditGPA(grade) {
for (var i = 0; i < gradeList.length; i++) {
if ( gradeList[i].grade == grade) {
return gradeList[i].creditGPA;
}
}
}
function isShowable(grade) {
for (var i = 0; i < gradeList.length; i++) {
if ( gradeList[i].grade == grade) {
return gradeList[i].showable;
}
}
}
function getSelect(suffix,postedgrade) {
var select = "";
var selectName = "gradesList_" + suffix;
select += "<SELECT NAME='" + selectName + "'
onChange=update(this.form," + selectName + ")>";
for (var i = 0; i < gradeList.length; i++) {
if (gradeList[i].showable) {
select += "<OPTION VALUE='" + gradeList[i].grade
+ "'";
// if (i == 0) {
if (gradeList[i].grade == postedgrade) {
select += " SELECTED";
}
select += ">" + gradeList[i].grade;
}
}
select += "</SELECT>";
return select;
var honorPointsPrefix = "honorPoints_";
var gradePointsPrefix = "gradePoints_";
var decplaces = 2;
var previousSemesters = "Previous Semesters";
var J_grade = false;
sem = new Array();
sem[0] = new semesterName("1", "SUMMER1");
sem[1] = new semesterName("2", "SUMMER2");
sem[2] = new semesterName("3", "FALL");
sem[3] = new semesterName("4", "SPRING");
courseList = new Array();
function getGradePoints(credits, points) {
return parseFloat (credits) * parseFloat (points);
}
function format (expr, decplaces) {
var str = "" + Math.round (eval(expr) * Math.pow(10,decplaces))
while (str.length <= decplaces) {
str = "0" + str
}
// establish location of decimal point
var decpoint = str.length - decplaces
// assemble final result from: (a) the string up to the position
of
// the decimal point; (b) the decimal point; and (c) the balance
// of the string. Return finished product.
return str.substring(0,decpoint) + "." +
str.substring(decpoint,str.length);
}
function getTotalCredits(semester) {
var totalCredits = 0;
for (var i = 0; i < courseList.length; i++) {
if (isCreditGPA(courseList[i].grade) && (
courseList[i].semesterCode
== semester || semester == null)) {
totalCredits +=
parseFloat(courseList[i].credits);
}
}
return totalCredits;
}
function getTotalGradePoints(semester) {
var totalGradePoints = 0;
var honor;
for (var i = 0; i < courseList.length; i++) {
if (isCreditGPA(courseList[i].grade) && (
courseList[i].semesterCode
== semester || semester == null)) {
honor = getHonorPoints(courseList[i].grade);
totalGradePoints +=
parseFloat(courseList[i].gradePoints);
}
}
return totalGradePoints;
}
function getEarnedCredits(semester) {
var credits = 0;
for (var i = 0; i < courseList.length; i++) {
if (isCreditEarned(courseList[i].grade) && (
courseList[i].semesterCode == semester || semester == null)) {
credits += parseFloat(courseList[i].credits);
}
}
return credits;
}
function getGPA(semester) {
var gpa = parseFloat(getTotalGradePoints(semester)) /
parseFloat(getTotalCredits(semester));
if (isNaN(gpa)) {
return 0;
} else {
return gpa;
}
}
function semesterName(code,fullName) {
this.code = code;
this.fullName = fullName;
}
function fullSemesterName(semesterCode) {
var semester = "";
var year = semesterCode.substring(0, semesterCode.length - 1);
temp = semesterCode.substring(semesterCode.length - 1);
for (var i = 0; i< sem.length; i++) {
if (temp == sem[i].code) {
semester += sem[i].fullName;
break;
}
}
if (temp != "4") {
year = year -1;
}
return semester + " " + year;
// return temp + " " + year;
}
function assembleTable(semester) {
var content = "";
// start assembling HTML for raw tabl
content += "<TABLE ALIGN='center' BORDER>";
// heads of each column
content += "<TR><FONT
SIZE=-1><TH>Course</TH><TH>Semester</TH><TH>Credits</TH><TH>Grade</TH><TH>Honor
Points</TH><TH>Grade Points</FONT></TH></TR>";
for (var i = 0; i < courseList.length; i++) {
if (courseList[i].semesterCode >= semester || semester
== null
|| courseList[i].grade == 'I' ||
courseList[i].grade == 'X'
|| courseList[i].grade == 'MG' ||
courseList[i].grade == 'No grade')
{
content += "<TR>";
content += "<TD><FONT SIZE=-1>" +
courseList[i].course +
"</FONT></TD>";
content += "<TD><FONT SIZE=-1>" +
courseList[i].semesterName +
"</FONT></TD>";
content += "<TD><FONT SIZE=-1>" +
courseList[i].credits +
"</FONT></TD>";
content += "<TD><FONT SIZE=-1>" +
getSelect(i,courseList[i].grade) +
"</FONT></TD>";
content += "<TD><FONT SIZE=-1><INPUT TYPE='text'
NAME='" +
honorPointsPrefix + i
+ "' value=" + courseList[i].honorPoints
+ " SIZE=10 DISABLED
onFocus=''></FONT></TD>";
content += "<TD><FONT SIZE=-1><INPUT TYPE='text'
NAME='" +
gradePointsPrefix + i
+ "' value=" + courseList[i].gradePoints
+ " SIZE=10 DISABLED
onFocus=''></FONT></TD>";
content += "</TR>";
}
}
content += "</TABLE>"
return content;
}
function assembleTablePrevious(semester) {
var content = "";
// start assembling HTML for raw tabl
content += "<TABLE ALIGN='center' BORDER>";
// heads of each column
content += "<TR><FONT
SIZE=-1><TH>Course</TH><TH>Semester</TH><TH>Credits</TH><TH>Grade</TH><TH>Honor
Points</TH><TH>Grade Points</FONT></TH></TR>";
for (var i = 0; i < courseList.length; i++) {
if (courseList[i].semesterCode < semester) {
content += "<TR>";
content += "<TD><FONT SIZE=-1>" +
courseList[i].course +
"</FONT></TD>";
content += "<TD><FONT SIZE=-1>" +
courseList[i].semesterName +
"</FONT></TD>";
content += "<TD><FONT SIZE=-1>" +
courseList[i].credits +
"</FONT></TD>";
content += "<TD><FONT SIZE=-1>" +
courseList[i].grade +
"</FONT></TD>";
content += "<TD><FONT SIZE=-1>" +
courseList[i].honorPoints +
"</FONT></TD>";
content += "<TD><FONT SIZE=-1>" +
courseList[i].gradePoints +
"</FONT></TD>";
content += "</TR>";
}
}
content += "</TABLE>"
return content;
}
// course object constructor
function course (course, credits, grade, semesterCode, semesterName,
courseTitle) {
this.course = course;
this.credits = credits;
if (grade =="J") {
J_grade = true;
}
this.grade = grade;
if (grade == "" || grade =="J" || grade == "MG") {
if (grade == "") {
this.grade = gradeList[0].grade;
}
this.editable = true;
} else {
this.editable = false;
}
this.semesterCode = semesterCode;
this.semesterName = fullSemesterName(semesterCode);
this.courseTitle = courseTitle;
this.honorPoints = getHonorPoints(this.grade);
this.gradePoints = format(getGradePoints(this.credits,
this.honorPoints),1);
}
var mess= "";
function isJGrade() {
if (J_grade) {
alert("You have a class with a 'J' grade. If you enter
a grade for
the second half of this 'J' grade class - the cumulative GPA estimation
will not be accurate.");
// J_grade = false;
}
}
function showResult(form) {
// alert("I am " + navigator.userAgent.toLowerCase());
// if (checkBrowser('safari')) {
// alert("I am Safari");
// window.close();
// } else {
form.currentGradePoints.value =
format(getTotalGradePoints(currentSemesterCode), 1);
form.currentCredits.value =
getTotalCredits(currentSemesterCode);
form.currentGpa.value =
format(getGPA(currentSemesterCode),
decplaces);
form.currentEarnedCredits.value =
getEarnedCredits(currentSemesterCode);
form.totalGradePoints.value =
format(getTotalGradePoints(null), 1);
form.totalCredits.value = getTotalCredits(null);
form.gpa.value = format(getGPA(null), decplaces);
form.totalEarnedCredits.value = getEarnedCredits(null);
// }
}
function update(form, select) {
var work = select.name.split("_");
//alert("kuku/" + work[1] + " form.elements.length==" +
form.elements.length);
courseList[work[1]].grade =
select.options[select.selectedIndex].value;
//alert("grade==" + courseList[work[1]].grade);
courseList[work[1]].honorPoints =
getHonorPoints(courseList[work[1]].grade);
//alert("honorPoints==" + courseList[work[1]].honorPoints);
courseList[work[1]].gradePoints =
format(getGradePoints(courseList[work[1]].credits,
courseList[work[1]].honorPoints), 1);
//alert("gradePoints==" + courseList[work[1]].gradePoints);
var formElements = document.GPAForm.elements;
for (var i = 0; i < formElements.length; i++) {
alert ("element name " +
document.GPAForm.elements[i].name + "
element index " + i); // problem is here!!!!
if (form.elements[i] == null) {
alert("index=" + i + " I am null");
}
if (document.GPAForm.elements[i].name ==
(honorPointsPrefix +
work[1])) {
document.GPAForm.elements[i].value =
courseList[work[1]].honorPoints;
}
if (document.GPAForm.elements[i].name ==
(gradePointsPrefix +
work[1])) {
document.GPAForm.elements[i].value =
courseList[work[1]].gradePoints;
}
}
// form.reset();
showResult(document.GPAForm);
}
function showTable(form) {
if (form.showAll.checked) {
prev_sem_expolrer.style.visibility="visible";
} else {
prev_sem_expolrer.style.visibility="hidden";
}
}
function checkBrowser(string)
{
place = navigator.userAgent.toLowerCase().indexOf(string) + 1;
thestring = string;
return place;
}
courseList[0] = new course ("CASCH131", "4.0","A","20053","FALL
04","!title!");
courseList[1] = new course ("CASMA123", "4.0","A","20053","FALL
04","!title!");
courseList[2] = new course ("CASWR100", "4.0","B+","20053","FALL
04","!title!");
courseList[3] = new course ("ENGEK126", "4.0","A","20053","FALL
04","!title!");
courseList[4] = new course ("CASCH102", "4.0","A","20054","SPRG
05","!title!");
courseList[5] = new course ("CASLN212", "4.0","A","20054","SPRG
05","!title!");
courseList[6] = new course ("CASMA124", "4.0","A","20054","SPRG
05","!title!");
courseList[7] = new course ("CASPY211", "4.0","","20054","SPRG
05","!title!");
courseList[8] = new course ("CASPY211", "4.0","A","20054","SPRG
05","!title!");
courseList[9] = new course ("ENGEK130", "4.0","A","20054","SPRG
05","!title!");
courseList[10] = new course ("CASAR100", "4.0","A-","20063","FALL
05","!title!");
courseList[11] = new course ("CASEC101", "4.0","B+","20063","FALL
05","!title!");
courseList[12] = new course ("CASMA225", "4.0","A","20063","FALL
05","!title!");
courseList[13] = new course ("CASPY212", "4.0","A","20063","FALL
05","!title!");
courseList[14] = new course ("ENGEK301", "4.0","A-","20063","FALL
05","!title!");
courseList[15] = new course ("ENGAM310", "4.0","","20064","SPRG
06","!title!");
courseList[16] = new course ("ENGDR999", "16.0","","20064","SPRG
06","!title!");
courseList[17] = new course ("ENGEK156", "2.0","","20064","SPRG
06","!title!");
courseList[18] = new course ("PDPAQ101", "1.0","","20064","SPRG
06","!title!");
courseList[19] = new course ("SMGAC221", "4.0","","20064","SPRG
06","!title!");
courseList[20] = new course ("SMGAC222", "4.0","","20064","SPRG
06","!title!");
courseList[21] = new course ("ENGSC311", "4.0","","20071","SUM1
06","!title!");
var currentSemesterCode = "20073";
var currentSemesterName = fullSemesterName("20073");
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF LINK=#CC0000 TEXT=#330000 VLINK=#CC0000
ALINK=#FF0000 onLoad="isJGrade();showResult(document.forms[0])">
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0>
<TR>
<TD><FONT SIZE=+1 COLOR=#660000 FACE="Verdana, Helvetica, Arial,
sans-serif"><B>GPA ESTIMATOR</B></FONT>
<TD ALIGN=right>
</TABLE>
<HR>
<TABLE ALIGN="center" BORDER=2 CELLSPACING=0 CELLPADDING=0
WIDTH="100%">
<TR ALIGN="center">
<TD>This calculation tool is an unofficial representation for
use in
estimating semester grade point averages. Some values may vary slightly
due to the script language limitations.
</TABLE>
<BR>
<BR>
<!--
<TABLE CELLSPACING=0 CELLPADDING=0>
<TR>
<TH>Semester:
<TD>
<SCRIPT LANGUAGE="JavaScript">
document.write(fullSemesterName("20073"));
</SCRIPT>
</TABLE>
-->
<TABLE ALIGN='center' CELLSPACING=0 CELLPADDING=0>
<TR>
<TD><B>Current semester courses and previous semesters' courses with
grades</B></TD>
</TR>
<TR>
<TD><B>'X', 'MG', 'I', and 'No grade'.</B></TD>
</TR>
</TABLE>
<FORM name="GPAForm">
<SCRIPT LANGUAGE="JavaScript">
document.write(assembleTable(currentSemesterCode)) ;
document.close();
</SCRIPT>
<BR>
<BR>
<TABLE ALIGN='center' BORDER=0>
<TR><TH></TH><TH>Grade Points</TH>
<TH>GPA Based Credits</TH>
<TH>Estimated GPI/GPA</TH>
<TH>Estimated Earned Credits</TH></TR>
<TR>
<TD><STRONG>Current Semester<STRONG></TD>
<TD><INPUT TYPE='text' NAME='currentGradePoints' SIZE=10
DISABLED
onFocus=''></TD>
<TD><INPUT TYPE='text' NAME='currentCredits' SIZE=10 DISABLED
onFocus=''></TD>
<TD><INPUT TYPE='text' NAME='currentGpa' SIZE=10 DISABLED
onFocus=''></TD>
<TD><INPUT TYPE='text' NAME='currentEarnedCredits' SIZE=10
DISABLED
onFocus=''></TD>
</TR>
<TR>
<TD><STRONG>University(cumulative)</STRONG></TD>
<TD><INPUT TYPE='text' NAME='totalGradePoints' SIZE=10 DISABLED
onFocus=''></TD>
<TD><INPUT TYPE='text' NAME='totalCredits' SIZE=10 DISABLED
onFocus=''></TD>
<TD><INPUT TYPE='text' NAME='gpa' SIZE=10 DISABLED
onFocus=''></TD>
<TD><INPUT TYPE='text' NAME='totalEarnedCredits' SIZE=10
DISABLED
onFocus=''></TD>
</TR>
</TABLE>
<BR>
<BR>
<INPUT TYPE="checkbox" NAME="showAll"
onClick="showTable(this.form)"><STRONGShow Previous
Semesters</STRONG>
</FORM>
<div id=prev_sem_expolrer style="visibility:hidden">
<h3 ALIGN='center'Previous Semesters</I></h3>
<SCRIPT LANGUAGE="JavaScript">
document.write(assembleTablePrevious(currentSemest erCode));
</SCRIPT>
</div>
</BODY>
</HTML>