Matthias999
Gebruiker
- Lid geworden
- 29 jan 2019
- Berichten
- 5
Hallo allemaal
Ik ben bezig met een oefening om een personeelsbestand te maken met selectieknoppen. Je vult je gegevens in via een formulier. In het begin lijkt alles goed te werken. Ik druk op de "save en next" knop en de functie maakt een object van de gegevens dat ik heb ingevuld en begint met een blanco formulier. En zo doe ik steeds opnieuw. Als ik klaar ben dan druk ik op de "klaar" knop, het formulier verdwijnt en er komen 4 selectieknoppen tevoorschijn die ik nog moet invullen met een functie. Maar vanaf ik op de klaar knop druk krijg ik ineens foutmeldingen dat het object niet gedefineerd is... Het lijkt erop dat vanaf ik op de "klaar" knop druk dat het programma het object doodleuk wist? Parameters invullen helpt ook niets... Ik heb nog niet zoveel ervaring met javascript, waarschijnlijk is het een grote beginnersfout... Wie kan er mij helpen?
Ik ben bezig met een oefening om een personeelsbestand te maken met selectieknoppen. Je vult je gegevens in via een formulier. In het begin lijkt alles goed te werken. Ik druk op de "save en next" knop en de functie maakt een object van de gegevens dat ik heb ingevuld en begint met een blanco formulier. En zo doe ik steeds opnieuw. Als ik klaar ben dan druk ik op de "klaar" knop, het formulier verdwijnt en er komen 4 selectieknoppen tevoorschijn die ik nog moet invullen met een functie. Maar vanaf ik op de klaar knop druk krijg ik ineens foutmeldingen dat het object niet gedefineerd is... Het lijkt erop dat vanaf ik op de "klaar" knop druk dat het programma het object doodleuk wist? Parameters invullen helpt ook niets... Ik heb nog niet zoveel ervaring met javascript, waarschijnlijk is het een grote beginnersfout... Wie kan er mij helpen?
HTML:
<html>
<h1>Registratie van de personeelsleden</h1>
<br>
<form name="personeelsleden" id="personeelform" action="" method="get">
<p>
Alle velden zijn verplicht
</p>
<div>
<label for='voornaam'>Voornaam </label>
<input type="text" name="Voornaam" maxlength="15" id="voornaam">
<label class="msg"></label>
</div>
<div>
<label for='naam'>Naam </label>
<input type="text" name="Naam" maxlength="25" id="naam">
<label class="msg"></label>
</div>
<div>
<label for='geslacht'>Geslacht </label>M
<input type="radio" name="geslacht" id="man" value="M">
V
<input type="radio" name="geslacht" id="vrouw" value="V">
<label class="msg"></label>
</div>
<div>
<label for='geboortedatum'>Geboortedatum</label>
<input type="date" name="geboortedatum" id="geboortedatum">
<label class="msg"></label>
</div>
<div>
<label for='salaris'>Salaris</label>
<input type="number" name="Salaris" value="0" id="salaris">
<label class="msg"></label>
</div>
<div>
<label for='rijbewijsB'>Rijbewijs B</label>
<input type="checkbox" name="RijbewijsB" value="RijbewijsB" id="rijbewijsB">
<label class="msg"></label>
</div>
<div>
<label></label>
<br>
<button id= "save" type="button">
Save en next
</button><label class="msg"></label>
</div>
<br>
</div><span id="teller">0</span><div id="info">personeelsleden in de databank</div>
</label>
<br>
<br>
<button id= "personeelslijst" type="button">
Klaar
</button>
</form>
<br>
<input type="button" id="selectie1" value="Selectie 1">
<input type="button" id="selectie2" value="Selectie 2"><div id="output2"></div>
<input type="button" id="selectie3" value="Selectie 3"><div id="output3"></div>
<input type="button" id="selectie4" value="Selectie 4"><div id="output4"></div>
<br>
<div id="output1"></div>
</html>
Code:
<script>
//======================== Array ============================//
var aoLijst = new Array();
//window.onload = function (aoLijst){
//======================== Dom elementen ============================//
var voornaam = document.getElementById("voornaam");
var naam = document.getElementById("naam");
var geslacht = personeelsleden.geslacht;
var geboortedatum = document.getElementById("geboortedatum");
var salaris = document.getElementById("salaris");
var rijbewijs = document.getElementById("rijbewijsB");
var saveKnop = document.getElementById("save");
var klaarKnop = document.getElementById("personeelslijst");
var teller = document.getElementById("teller");
var selectie1 = document.getElementById("selectie1"); // Aantal vrouwen in de selectie die meer dan 2000 euro verdienen
var selectie2 = document.getElementById("selectie2"); // Een chronologische lijst van verjaardagen
var selectie3 = document.getElementById("selectie3"); // Gemiddeld salaris
var selectie4 = document.getElementById("selectie4"); // aantal mensen jonger dan 30 jaar die geen rijbewijs B hebben
var output = document.getElementById("output1");
// laat de 4 selectieknoppen en de output verdwijnen
selectie1.style.display = "none";
selectie2.style.display = "none";
selectie3.style.display = "none";
selectie4.style.display = "none";
output.style.display = "none";
//======================== event Listeners ============================//
saveKnop.addEventListener('click', function (e){
e.preventDefault();
personeelInlezen(this);
})
//======================== Leest de personen in ============================//
function personeelInlezen(Voornaam, Naam, Geslacht, Geboortedatum, Salaris, RijbewijsB, teller){
//formulierwaarden aflezen
var sVoornaam = voornaam.value; //String
var sNaam = naam.value; //String
var sGeslacht = undefined ; //String of undefined
var eGeboortedatum = geboortedatum.value; //date input
var eSalaris = salaris.value; //number
var cRijbewijsB = rijbewijs.checked; //boolean
var parts = eGeboortedatum.split("-"); // splitst het date-format in stukken
var day = parseInt(parts[2], 10); // dag
var month = parseInt(parts[1], 10); // maand
var year = parseInt(parts[0], 10); // jaar
//bepaal value geslacht
for(var i=0;i<geslacht.length;i++){
if(geslacht[i].checked==true){sGeslacht=geslacht[i].value};
}
// validatie velden
if (sVoornaam == "" || sNaam =="" || typeof(sGeslacht) == "undefined" || isNaN(eSalaris)){
alert("één of meerdere van de velden zijn niet ingevuld!")
}
else if (year > 2001){
alert("Dit persoon is te jong om in dit bedrijf te werken");
}
// We sturen de gegevens door om ze op te slaan
else{ fnPersoneelslidToevoegen(sVoornaam, sNaam, sGeslacht, eGeboortedatum, eSalaris, cRijbewijsB);
document.getElementById("personeelform").reset();
voornaam.focus();
}
//======================== Slaagt de personen op in de lijst ============================//
function fnPersoneelslidToevoegen(sVoornaam, sNaam, sGeslacht, eGeboortedatum, eSalaris, cRijbewijsB, persoon, info, teller){
var persoon = new Object();
persoon.voornaam = sVoornaam;
persoon.naam = sNaam;
persoon.geslacht = sGeslacht;
persoon.geboortedatum = eGeboortedatum;
persoon.salaris = eSalaris;
persoon.rijbewijsB = cRijbewijsB;
aoLijst.push(persoon);
console.log(persoon);
console.log(persoon.voornaam)
console.log(aoLijst.length)
if (aoLijst.length == 10){
saveKnop.style.display = "none";
}
else if (aoLijst.length == 1){
var info = document.getElementById("info")
info.innerHTML = "personeelslid in de databank";
}
else if (aoLijst.length >1) {
var info = document.getElementById("info")
info.innerHTML = "personeelsleden in de databank";
}
fnUpdateTeller(1);
}
//======================== teller ============================//
function fnUpdateTeller(n){
/*
update de teller in de span#teller
@n increment/verhoging
*/
var teller = document.getElementById('teller');
var nTeller = parseInt(teller.innerHTML);
nTeller = nTeller + n;
teller.innerHTML = nTeller;
}
klaarKnop.addEventListener("click", function (e){
e.preventDefault();
knoppenScherm(this);
})
//======================== Analyse scherm ============================//
// Laat het analyse scherm verschijnen
function knoppenScherm(aoLijst, persoon){
if (aoLijst.length <2){
alert("Voeg minimaal 2 personeelsleden in!")
}
else{
var form = document.getElementById("personeelform");
form.style.display = "none";
selectie1.style.display ="block";
selectie2.style.display ="block";
selectie3.style.display ="block";
selectie4.style.display ="block";
output1.style.display ="block";
var kop = document.getElementsByTagName("h1")[0];
kop.innerHTML = "Analyse scherm";
}
console.log(persoon.voornaam)
}
selectie1.addEventListener("click", function (e){
e.preventDefault();
selectieKnop1(this);
})
function selectieKnop1 (aoLijst, persoon){
var aantalVrouwenSalaris = 0;
console.log(persoon.voornaam)
if (persoon.geslacht == "V" && persoon.salaris >2000){
for(var i = 0; i<persoon.length-1;i++){
aantalVrouwenSalaris = aantalVrouwenSalaris + 1;}
alert("Er zijn " + aantalVrouwenSalaris + " vrouwen met een maandloon van meer dan 2000 euro")
}
else{alert ("test")
}
}
}
</script>
