asked on
Working with Objects, Object Hierarchies and Nodes

I'm working on a case for a course I'm taking which involves making a website with certain tools. The site should allow one to add new contributions to a contribution table and also allow one to remove rows in the table. I've tried debugging and firebug doesn't come up with any errors but it's obvious that my functions are not functioning. The code in the html and js function docs is posted below. I've added the course's instructions in case they were of any help in referencing what I've tried to do with what the course has asked for. I'm sure there are some syntax problems as I'm quite new to this.
<html>
<head>
<!-- 
   New Perspectives on JavaScript
   Tutorial 10
   Case Problem 3
 
   The Lighthouse
 
 
   Filename:         clist.htm
   Supporting files: data.js, lhouse.css, logo.jpg, newdata.js
 
-->
<title>The Lighthouse</title>
<link href="lhouse.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="newdata.js"></script>
 
</head>
 
<body onLoad="makeTable();">
<form name="donations" id="donations" action="">
<div id="title">
   <img src="logo.jpg" alt="The Lighthouse" />
   The Lighthouse<br />
   543 Oak Street<br />
   Delphi, KY &nbsp;&nbsp;89011<br/>
   (542) 555-7511
</div>
 
<div id="data_entry">
   <table>
   <tr>
      <td>Contributors</td>
      <td id="totalContr"></td>
   </tr>
   <tr>
      <td>Total</td>
      <td id="totalAmt"></td>
   </tr>
   </table>
 
   <table>
   <tr><td colspan="2"><h3>Enter a New Contributor</h3></td></tr>
   <tr>
      <td>First Name</td><td><input name="fname" id="fname" /></td>
   </tr>
   <tr>
      <td>Last Name</td><td><input name="lname" id="lname" /></td>
   </tr>
   <tr>
      <td>Street</td><td><input name="street" id="street" /></td>
   </tr>
   <tr>
      <td>City</td><td><input name="city" id="city" /></td>
   </tr>
   <tr>
      <td>State</td>
      <td><select name="state" id="state">
      <option>AL</option><option>AK</option><option>AZ</option><option>AR</option>
      <option>CA</option><option>CO</option><option>CT</option><option>DE</option>
      <option>DC</option><option>FL</option><option>GA</option><option>HI</option>
      <option>ID</option><option>IL</option><option>IN</option><option>IA</option>
      <option>KS</option><option>KY</option><option>LA</option><option>ME</option>
      <option>MD</option><option>MA</option><option>MI</option><option>MN</option>
      <option>MS</option><option>MO</option><option>MT</option><option>NE</option>
      <option>NV</option><option>NH</option><option>NJ</option><option>NM</option>
      <option>NY</option><option>NC</option><option>ND</option><option>OH</option>
      <option>OK</option><option>OR</option><option>PA</option><option>RI</option>
      <option>SC</option><option>SD</option><option>TN</option><option>TX</option>
      <option>UT</option><option>VT</option><option>VA</option><option>WA</option>
      <option>WV</option><option>WI</option><option>WY</option>
      </select>
      </td>
   </tr>
   <tr>
      <td>Zip</td><td><input name="zip" id="zip" /></td>
   </tr>
   <tr>
      <td>Amount</td><td><input name="amount" id="amount" /></td>
   </tr>
   <tr>
      <td>Date</td><td><input name="date" id="date" /></td>
   </tr>
   <tr>
      <td colspan="2" id="buttoncell1">
         <input type="button" onclick="addRecord()"  value="Add Contributor" />
		 
      </td>
   </tr>
   </table>
</div>
 
<div id="report">
   <p><input value="Remove Checked Items" onclick="removeRecords()" type="button" /></p>
 
   <table id="ctable">
   <tr><th colspan="5">Contributor List</th>
   </tr>
   <tr id="titleRow">
      <th>Remove</th>
      <th>Date</th>
      <th>Name</th>
      <th>Address</th>
      <th>Amount</th>
   </tr><tr id="emptyRow"><td class="rc"><input type="checkbox" /></td><td></td><td></td><td></td><td class="ac"></td></tr>
   </table>
</div>
 
</form>
</body>
</html>
 
 
 
 
 
 
 
/*
   
   New Perspectives on JavaScript
   Tutorial 10
   Case Problem 3
 
   Filename: newdata.js
 
 
   Function List:
   updateTotals(phrase, pnum)
      Updates contents of the table cells "totalContr" and "totalAmt" displaying 
      the total number of contributors and the total contributions
 
   makeTable()
      Populates the contributors table with the entries of the 8 data arrays by
      calling the addRow() function for each item in the arrays.
 
   addRow(i)
      Adds a row to the contributors using data from the 8 data arrays who index
      value equals "i".
 
   addRecord()
      Adds a new record to the end of the 8 data arrays and then calls the addRow() function
      to add a new row to the contributors table and the updateTotals() function to
      update the tables cells displaying the total number of contributors and
      contributions.
 
    removeRecord(index)
       Removes a record from the eight data arrays whose index value equals index.
 
    removeNode(node)
       Removes a node from a node tree, and returns a reference to the node's previous sibling.
 
    removeRecords()
       Loops through the rows in the contributors table checking whether the remove
       checkbox has been selected. For each selected checkbox, the table row is removed
       and the corresponding entries in the 8 data arrays are removed. The updateTotals()
       function is then called.
 
*/
 
 
/*  Within the totalContr table cell, display the length of the amount array. 
 
Create a variable named totalContributions and set its initial value to 0.
 
Create a for loop that loops through each entry in the amount array. Each time through the loop increases the value of the totalContributions variable by the amount in the current entry in thr amount array.
 
Within the totalAmt table cell, display the value of the totalContributions variable     */
 
function updateTotals() {
document.getElementById("totalContr").value = amount.length;
var totalContributions = 0;
   for (i=0; i < amount.length; i++) {
     totalContributions = totalContributions + amount[i];};
document.getElementById("totalAmt").value = totalContributions;
}
 
/*  Create a variable named headingRow that references the table row with the id "titleRow".  This row contains the titles from the contributors table.  Create a second variable named blankRow that references the table row with the id "emptyRow".
 
Use the cloneNode() method to clone the blankRow node.  Set the value of the deep variable to true in order to copy the entire node tree.  Store this document fragment in a variable named dataRow.
 
Create a for loop that loops through the entries in the amount array.  For each entry call the addRow() function using the value of the counter variable in the for loop as the parameter value in the addRow() function.
 
Call the updateTotals() function      */
 
function makeTable() {
var headingRow = document.getElementById("titleRow"); 
var blankRow = document.getElementById("emptyRow"); 
dataRow = blankRow.cloneNode(true);
for ( i = 0; i <amount.length; i++) { addRow(i) ;};
updateTotals();
}
 
/*  Use the cloneNode() method to clone the dataRow document fragment you created in the makeTable() function.  Set the value of the deep parameter to true.  Store this documentfragment in the variable newRow.
 
Change the content of newRow's second child node to the value of the date array using the current index. Change the content of newRow's third child node to the ntex string "lastName, firstName" where lastName and firstName are the values of the lastName and firstName arrays using the current index. Change the content of newRow's fourth child node to the text string "street<br />city, state, zip" where street, city, state, and zip are the current values from the street, city, state, and zip arrays. Change the content of newRow's fifth child node to the value of the amount array.
 
 If the value of the index variable equals 0, meaning that this is the first row being added to the contributor table, then use the replaceChild() method to replace the blankRow node with newRow.  (Hint: Apply the replaceChild() method to the blankRow.parentNode node)  If the index variable is not equal to 0, then insert the newRow node before the next sibling of the headingRow node. (Hint: Apply the insertBefore() method to the headingRow.parentNode node)    */
 
function addRow(i) {
var newRow;
newRow = dataRow.cloneNode(true);
newRow.childNodes[1].nodeValue = date[i];
newRow.childNodes[2].nodeValue = lastName[i] + ", " + firstName[i];
newRow.childNodes[3].nodeValue = street[i] + "<br>" + city[i] + ", " + state[i] + zip[i];
newRow.childNodes[4].nodeValue = amount.length;
if (n = 0) { blankRow.parentNode.replaceChild(newRow, blankRow) };
if (n != 0) { headingRow.parentNode.insertBefore(newRow, headingRow.nextSibling)  };
}
 
/*  Create a variable named recordNum equal to the length of the amount array.
 
Set the value of first[recordNum] to the value of the fname field from the donations Web form.  Set the value of last[recordNum] to the value of the lname field.  Set the value of the street array item to the value of the street field and the value of the city array item to the value of the city field.  Determine which state option has been selected by the user and store the text of the selected option in the state arry item. Set the value of the zip, amount, and date array items to the values of the zip, amount, and date fields in the donations Web form.  
 
Call the addRow() function using the value of the recordNum variable as the parameter value.
 
Call the updateTotals() function.     */
 
function addRecord() {
var recordNum = amount.length;
data_entry.document.getElementById("fname").nodeValue = first[recordNum];
data_entry.document.getElementById("lname").nodeValue = last[recordNum];
data_entry.document.getElementById("street").nodeValue = street;
data_entry.document.getElementById("city").nodeValue = city;
data_entry.document.getElementById("state").nodeValue = state;
data_entry.document.getElementById("zip").nodeValue = zip;
data_entry.document.getElementById("amount").nodeValue = amount;
data_entry.document.getElementById("date").nodeValue = date;
addRow(recordNum);
updateTotals();
}
 
/*  Use the splice() method to remove the item from the firstName array whose index value equals the value of the index parameter.  Remove only one array item.
 
Repeat step for the lastName, street, city, state, zip, amount, and date arrays.    */
 
function removeRecord(index) {
firstName.splice(index,1);
lastName.splice(index,1);
street.splice(index,1);
city.splice(index,1);
state.splice(index,1);
zip.splice(index,1);
amount.splice(index,1);
date.splice(index,1);
}
 
/*  Create a variable named prevNode referencing the node's previous sibling.  
 
Use the removeChild() method to remove the node.  (Hint: Apply the removeChild() method to the node's parent node.)
 
Return the prevNode variable from the function.      */
 
function removeNode(node) {
var prevNode = node.previousSibling;
prevNode.parentNode.removeChild(prevNode);
return prevNode;
}
 
/*  Create a variable named headerRow referencing the row with the id "titleRow".  
 
Create a variable named recordNum equal to the length of the amount array.
 
Create a for loop that uses familial references, starting with the node variable, n, equal to the first sibling of the headerRow node and proceeding to the next sibling (the next table row) until there is no next sibling.  Within the for loop, decrease the value of the recordNum varialbe by 1.  Then, insert an if condition that tests whether the name of the current node is "TR" (a table row).  If it is, insert a second if condition that tests whether the check box within the first table cell of the current row has been selected.  (Hint: Reference the check box using the reference n.firstChild.firstChild.)  If the check box has been checked, then: (1) Call the removeRecord() function using the recordNum as the parameter value, and (2) Let the node counter, n, be equal to the value returned by the removeNode() function using the n as the parameter value.
 
After the for loop has finished, call the updateTotals() function to update the contribution totals in the Web page.     */
 
function removeRecords() {
var headerRow;
ctable.document.getElementById("titleRow") = headerRow;
var recordNum = amount.length;
for ( n = 0; n < headerRow.childNodes.length; n++) {
recordNum = recordNum - 1;
if (headerRow.childNodes[n].name = "TR") {
  if (n.firstChild.firstChild != "") {
    removeRecord(recordNum);
	n = removeNode(n)};
	};
updateTotals(); }
}
 
 
 
 
/*
   New Perspectives on JavaScript
   Tutorial 10
   Case Problem 3
   Filename: lhouse.css
 
   This file contains styles used in the clist.htm file
 
*/
 
 
h1, h2, h3, th, #data_entry, #title {font-family: Arial, Helvetica, sans-serif}
 
h3 {width: 100%; background-color: rgb(135,206,255); text-align:center; margin: 0px}
 
td {vertical-align: top}
 
#title {width: 680px; text-align:right; color: rgb(192,142,90); border-bottom: 1px solid rgb(232,182,130); 
        margin-bottom:9px; font-size:10pt; height: 100px}
#title img {float: left}
 
#data_entry {width:230px; font-size: 9pt; float:left; margin-right: 10px}
#data_entry table {margin: 0px; width: 100%; border: 2px solid rgb(232,182,130); margin-bottom: 10px}
#data_entry td {font-size:9pt}
#data_entry input {font-size:9pt}
#data_entry select {font-size: 8pt}
 
#totalContr, #totalAmt {text-align: right; border: 1px solid black}
#first, #last, #street, #city {width: 150px}
#zip, #date {width: 80px}
#amount {width: 50px}
#buttoncell1 {text-align: center; border-top: 2px solid rgb(232,182,130); padding: 10px 0px}
 
#report {width:440px; float: left}
#report p {text-align: center; padding: 0px; margin: 15px 0px 20px 0px}
 
#report table {width: 100%; font-size: 8pt; margin-bottom: 10px; border: solid 2px rgb(232,182,130)}
 
#report #total {background-color:white; text-align:right; font-weight:normal}
 
#report th {background-color: rgb(255,230,153); border: 1px solid rgb(232,182,130)}
#report td {background-color:ivory; border: 1px solid black}
 
.rc {text-align: center}
.ac {text-align: right}
 
 
 
/*
   New Perspectives on JavaScript
   Tutorial 10
   Case Problem 3
 
   Filename: data.js
 
   Variable List:
 
   firstName: Contains the first name of the contributors.
   lastName:  Contains the last name of the contributors.
   street:    Contains the contributor's street address
   city:      Contains the contributor's city of residence
   state:     Contains the contributor's state of residence
   zip:       Contains the contributor's zip code.
   amount:    Contains the amount of the contribution.
   date:      Contains the date of the contribution.
 
*/
 
 
firstName = new Array();
lastName = new Array();
street = new Array();
city = new Array();
state= new Array();
zip = new Array();
amount = new Array();
date = new Array()
 
 
firstName[0]="Steve";
lastName[0]="Bones";
street[0]="900 Lawton Street";
city[0]="Wheaton";
state[0]="KY";
zip[0]="89211";
amount[0]=50;
date[0]="2007-08-25";
 
 
firstName[1]="Jeri";
lastName[1]="White";
street[1]="Hawkes Lane";
city[1]="Delphi";
state[1]="KY";
zip[1]="89211";
amount[1]=150;
date[1]="2007-08-25";
 
 
firstName[2]="Tom";
lastName[2]="Thomas";
street[2]="Rigel Avenue";
city[2]="Drake";
state[2]="KY";
zip[2]="89411";
amount[2]=100;
date[2]="2007-08-27";
 
 
firstName[3]="Hugh";
lastName[3]="Warren";
street[3]="585 Lindon Court";
city[3]="Wheaton";
state[3]="KY";
zip[3]="88877";
amount[3]=50;
date[3]="2007-08-28";
 
 
firstName[4]="Lynwood";
lastName[4]="Ingersoll";
street[4]="723 Jackson Avenue";
city[4]="Delphi";
state[4]="KY";
zip[4]="88802";
amount[4]=500;
date[4]="2007-08-30";
 
 
firstName[5]="Petronila";
lastName[5]="Damico";
street[5]="44 Stewart Street";
city[5]="Drake";
state[5]="KY";
zip[5]="88604";
amount[5]=250;
date[5]="2007-08-30";
 
 
firstName[6]="Livia";
lastName[6]="Mckinnon";
street[6]="557 Ivy Avenue";
city[6]="Jasper";
state[6]="KY";
zip[6]="88960";
amount[6]=50;
date[6]="2007-08-31";
 
 
firstName[7]="Kris";
lastName[7]="Levesque";
street[7]="542 Upton Avenue";
city[7]="Delphi";
state[7]="KY";
zip[7]="88793";
amount[7]=100;
date[7]="2007-08-31";
 
 
firstName[8]="Basilia";
lastName[8]="Lu";
street[8]="851 Flad Court";
city[8]="Jasper";
state[8]="KY";
zip[8]="88633";
amount[8]=500;
date[8]="2007-09-02";
 
 
firstName[9]="Ginny";
lastName[9]="Rainey";
street[9]="657 Dawson Lane";
city[9]="Youngston";
state[9]="KY";
zip[9]="88873";
amount[9]=50;
date[9]="2007-09-03";
Open in new window
inisrael
ASKER
Maybe I shouldn't have posted everything; it may make it more daunting. The newdata.js file that comes after the clist.htm file is what I really need help on. I thought the other parts might be helpful. Let me know if you think I should put up just the specific troubling js parts of the project on other posts or if the supporting files help.