0

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");
    }
};
baao
  • 71,625
  • 17
  • 143
  • 203
  • 2
    `localStorage` and `JSON` can't retain an object's inheritance, only the object itself (in string form). When you parse the value, all of the entries will just be plain `Object`s rather than `Contact`s. So, you'll have to recreate them as `new Contact()` instances -- [Parse JSON String into a Particular Object Prototype in JavaScript](http://stackoverflow.com/questions/5873624/parse-json-string-into-a-particular-object-prototype-in-javascript) – Jonathan Lonowski Oct 31 '15 at 16:33
  • Also see [Turning JSON strings into objects with methods](http://stackoverflow.com/questions/8111446/turning-json-strings-into-objects-with-methods) – Jonathan Lonowski Oct 31 '15 at 16:41
  • Aha so that's why it's happening, thanks! – cameron2134 Oct 31 '15 at 16:49

0 Answers0