I've been having a problem where calling the updateList function from window.onLoad, it does not recognise the tableRow function from inside updateList, and gives the error TypeError: cont.tableRow is not a function
in Firebug, however when a contact is added via the addContact function it works perfectly fine, calling the same updateList function.
Not overly familiar with JavaScript so I'm probably missing something obvious here.
Code:
var firstName, lastName, email, phoneNum, address, birthday, note, group, notifyUser, btnOk, btnCancel, btnDetails;
var contacts = [];
var Contact = function(firstName, lastName, email, phoneNum, address, birthday, group, note) {
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
this.phoneNum = phoneNum;
this.address = address;
this.birthday = birthday;
this.group = group;
this.note = note;
};
Contact.prototype.tableRow = function() {
var tr = '<tr><td>' + this.firstName + '</td> <td>' + this.lastName + '</td> <td>' + this.email + '</td> <td><a href = "#">' + this.address + '</a></td> <td>' + this.birthday + '</td> <td>' + this.phoneNum + '</td> <td>' + this.group + '</td> <td>' + this.note + '</td> <td> <input type = "checkbox"> </td> <td> Edit/Remove </td> </tr>';
return tr;
};
function clearForm() {
firstName.value = "";
lastName.value = "";
email.value = "";
address.value = "";
phoneNum.value = "";
birthday.value = "";
note.value = "";
group.value = "";
};
function addContact() {
contact = new Contact(firstName.value, lastName.value, email.value, phoneNum.value, address.value, birthday.value, group.value, note.value);
contacts.push(contact);
updateList();
clearForm();
localStorage["contacts"] = JSON.stringify(contacts);
notifyUser.innerHTML = "You added " + contacts[contacts.length - 1].firstName + " " + contacts[contacts.length - 1].lastName + " as a contact!";
};
function resetStorage() {
localStorage.clear();
};
function updateList() {
var htmlTable = document.getElementById("table");
table = '<table border="1"><thead> <th width = "100"> First Name </th> <th width = "100"> Last Name </th> <th width = "150"> Email Address </th> <th width = "200"> Address </th> <th> Birthday </th> <th> Phone Number </th> <th width = "100"> Group </th> <th width = "250"> Note </th> </thead>';
for(var i = 0; i < contacts.length; i++) {
var cont = contacts[i];
table += cont.tableRow();
}
table += "</table>";
htmlTable.innerHTML = table;
};
window.onload = function() {
// Form fields
firstName = document.getElementById("firstname");
lastName = document.getElementById("lastname");
email = document.getElementById("email");
address = document.getElementById("address");
phoneNum = document.getElementById("phone");
birthday = document.getElementById("birthday");
note = document.getElementById("note");
group = document.getElementById("group");
notifyUser = document.getElementById("notify");
// Buttons
btnOk = document.getElementById("okbtn");
btnCancel = document.getElementById("clearbtn");
btnDetails = document.getElementById("details");
// Check for contact list in local storage. Retrieve if not null
if(localStorage.getItem("contacts") !== null) {
console.log("not null");
contacts = JSON.parse(localStorage["contacts"]);
updateList();
} else {
console.log("null");
}
};