javascript adresboek

**ference bodie** · 17-12-2013, 11:11

Hallo allemaal,

Ik probeer een javascript adresboek te maken met een HTML table, maar ze werken niet goed samen en ik weet niet waarom.
hieronder javascript code:

function contactToevoegen(){

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();
};
contactToevoegen();

Hier de HTML:

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

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

als ik op toevoegen knop klik, komt er een prompt box, maar als ik mijn gevens heb ingetypt, komt het resultaat zoals verwacht. Het probleem is: de HTML table gaat weg! hoe kan ik ervoor zorgen dat de ingevoerde gegevens gewoon in de tabel getoond worden en dat ik kan toevoegen?

**Thomas Schiet** · 20-12-2013, 13:39

Het is niet verstandig om document.write te gebruiken, zodra de DOM is geladen zal deze functie namelijk alles overwriten. Het is een beter idee om de innerHTML van de tabel aan te passen. In dit geval vervang je dan

Code:

document.write(person.firstName+"<br />"+person.lastName+"<br />"+person.address+"<br />"+person.phoneNumber+"<br />");

door:

Code:

document.getElementById('adressen').innerHTML += person.firstName+"<br />"+person.lastName+"<br />"+person.address+"<br />"+person.phoneNumber+"<br />";

Je script zal nu nog een paar problemen hebben. In de huidige vorm wordt de array

Code:

contact

niet goed aangevuld met nieuwe data. De variabele wordt aangemaakt binnen de functie en heeft dus een verkeerde scope. Verder is

Code:

contact = [contactName];

niet hoe je een element toevoegt. Tot slot zal het script nu nieuwe pagina openen zodra je op de contact toevoegen knop drukt. Dit is op te lossen door het type naar een button te veranderen of return false in het resultaat toe te voegen.

Als je alle punten hierboven verwerkt in de code kom je op het volgende uit:
adres.js

Code:

var contact;function contactToevoegen(){


    contactName = {
    firstName: prompt("firstname",''),
    lastName: prompt("lastname",''),
    address: prompt("address",''),
    phoneNumber: prompt("phonenumber",'')
    };
    
    // Voeg de contact toe aan de array
    contact.push(contactName);
    
    console.log(contact);
    function printPerson(person){
        // Voeg de contact toe aan de HTML
        document.getElementById('adressen').innerHTML += person.firstName+"<br />"+person.lastName+"<br />"+person.address+"<br />"+person.phoneNumber+"<br />";
    }
    function list(){
        var contactLength = contact.length;
        // Eerst alles legen, omdat je anders alles opnieuw schrijft.
        document.getElementById('adressen').innerHTML = '';
        for(i=0; i < contactLength; i++){
            printPerson(contact[i])
        }
    }
    list();
};
contactToevoegen();

index.html

Code:

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


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

Tot slot zou ik je erop willen wijzen dat het een stuk handigere is om bijvoorbeeld jQuery te gebruiken. Dit scheelt een hoop tijd en kunt je code er een stuk netter mee maken dan dit.

javascript adresboek