javascript addressbook in html table

Question

I tried to make a JavaScript address book and wanted to show it in html table, but it doesn't work. The meaning is: if i click on add contact button, i can fill data in the prompt box. after that i see the result in the table, but instead of that..there is no table! and i can't add a new contact. How can i solve this problem?

JavaScript code:

function addcontact(){

    contactName = {
        firstName: prompt("firstname",''),
        lastName: prompt("lastname",''),
        address: prompt("address",''),
        phoneNumber: prompt("phonenumber",'')
    };

var contact = [contactName];

function printPerson(person){
    document.write(person.firstName+"<br />"+person.lastName+"<br />"+person.address+"<br />"+person.phoneNumber+"<br />");
}
function list(){
    var contactLength = contact.length;
    for(i=0; i < contactLength; i++){
        printPerson(contact[i])
    }
}
list();
};

and here my html:

<!DOCTYPE html>
<html>
    <head>
        <title>div insteller</title>
        <meta charset="utf-8">

        <style type="text/css">
            #adsressbook{width:300px;}
            #adsressbook td, th{ border:1px solid #000; padding:5px 10px;}
        </style>
    </head>
    <body>
        <form action='' method=''>
            <table id="adsressbook">
                <tr>
                    <th>Contacten</th>
                </tr>
                <tr>
                    <td><script type="text/javascript" src="adress/adres.js"></script></td>
                </tr>
                <tr>
                    <td><input type="submit" value="add contact" onclick="addcontact()"></td>
                </tr>
            </table>
        </form>
    </body>
</html>

To the people editing this: Don't change the OP's code in the question unless he verifies it is a typo / not his current code. — rlemon, Dec 17 '13 at 16:12

Kristian Barrett · Answer 1 · 2019-07-09T20:34:21.593

0

That is because you are using document.write(). That function is overwriting the content of your document and inserting the text you specified. What you want to do is append a row to your table.

You can check out this example (which is written in jQuery; but makes it a lot easier).

edited Jul 09 '19 at 20:34

answered Dec 17 '13 at 16:04

Kristian Barrett

3,574
2
26
40

that's right but i prefer make it without jquery. – FFBbodie Dec 17 '13 at 16:48

AeroX · Accepted Answer · 2013-12-17T16:59:06.830

Try something along the following lines:

var contacts = [];

function addcontact() {
    var person = {
        firstName: prompt("firstname", ""),
        lastName: prompt("lastname", ""),
        address: prompt("address", ""),
        phoneNumber: prompt("phonenumber", "")
    };
    contacts.push( person );
}

function resetView() {
    document.getElementById("output").innerHTML = "";
}

function printPerson( person ) {
    document.getElementById("output").innerHTML +=
        person.firstName + " - " +
        person.lastName + " - " +
        person.address + " - " +
        person.phoneNumber + "<br />";
}

function listContacts() {
    resetView();
    var len = contacts.length;
    for (x = 0; x < len; x++) {
        printPerson( contacts[x] );
    }
}

Here's a JSFiddle of it working: http://jsfiddle.net/nttk6/42/

It would probably be better to change printPerson() and resetView() to use the DOM rather then .innerHTML. You can also recombine the functions into 1 function again if you prefer.

The main thing is to move the contact or in my example the contacts variable out of the addContact function otherwise it is reset each time the function is called. Also you don't want to be using Document.Write().

And here's another example of it implemented as a class:

var ContactManager = {
    contacts: [],
    resetView: null,
    appendView: null,
    addContact: function(){
        var person = {
            firstName: prompt("firstname", ""),
            lastName: prompt("lastname", ""),
            address: prompt("address", ""),
            phoneNumber: prompt("phonenumber", "")
        };
        this.contacts.push( person );
        this.listContacts();
    },
    listContacts: function(){
        var len = this.contacts.length;
        this.resetView();
        for( x = 0; x < len; x++ ) {
            this.appendView( this.contacts[x] );
        }
    }
};

ContactManager.resetView = function(){
    document.getElementById("output").innerHTML = "";
};

ContactManager.appendView = function( person ){
    document.getElementById("output").innerHTML +=
        person.firstName + " - " +
        person.lastName + " - " +
        person.address + " - " +
        person.phoneNumber + "<br />";
};

And the JSFiddle for the class version: http://jsfiddle.net/TPxRa/6/

Did you press the show button on the first JSFiddle? I've posted a second example as well now which auto updates the table. — AeroX, Dec 17 '13 at 17:00
[Null](http://en.wikipedia.org/wiki/Null_pointer#Null_pointer) basicly means a value is not set. So on the class style version I created two place holders for functions and set them up afterwards. — AeroX, Dec 17 '13 at 17:17
why did you write that code in the var ContactManager? i removed it and it works still good.. — FFBbodie, Dec 18 '13 at 08:18
@FFBbodie It's a way of creating a something simular to a singleton class and initialising it at the same time as there would only ever be a single copy of the ContactManager class on a page. See this [Guide to Creating classes in javascirpt](http://www.phpied.com/3-ways-to-define-a-javascript-class/) — AeroX, Dec 18 '13 at 10:16

javascript addressbook in html table

2 Answers2