js eindoefening

var groentenLijst = [
    ["aardappelen",0.95,"kg"],
    ["avocado",2.69,"stuk"],
    ["bloemkool",1.93,"stuk"],
    ["brocoli",1.29,"stuk"],
    ["champignons",0.89,"250g"],
    ["chinese kool",1.59,"stuk"],
    ["groene kool",1.69,"stuk"],
    ["knolselder",1.29,"stuk"],
    ["komkommer",2.49,"stuk"],
    ["kropsla",1.69,"stuk"],
    ["paprika",0.89,"net"],
    ["prei",2.99,"bundel"],
    ["princessenbonen",1,"250g"],
    ["rapen",0.99,"bundel"],
    ["kropsla",1.69,"stuk"],
    ["rode kool",1.39,"stuk"],
    ["sla iceberg",1.49,"stuk"],
    ["spinazie vers",1.89,"300g"],
    ["sjalot",0.99,"500g"],
    ["spruiten",1.86,"kg"],
    ["trostomaat",2.99,"500g"],
    ["ui",0.89,"kg"],
    ["witloof 1ste keus",1.49,"700g"],
    ["wortelen",2.59,"kg"],
    ["courgetten",1.5,"stuk"]
    ];

    var winkels = [
    {naam:"de fruitmand",adres:"steenstraat 34", post:8000,gemeente:"Brugge",tel:"050342218",manager:"Francine Lapoule"},
    {naam:"Jos & Anneke",adres:"visserijstraat 1", post:8400,gemeente:"Oostende",tel:"059463689",manager:"Jos Leman"},
    {naam:"groene vingers",adres:"hoogstraat 108", post:9000,gemeente:"Gent",tel:"091342218"},
    {naam:"de buurtwinkel",adres:"die laene 22", post:2000,gemeente:"Antwerpen",tel:"0230342218",manager:"Bert Simoens"}
    ];

var totaalPrijs = 0;

window.onload = function () {
// nieuwe tabel aanmaken en deze als 1ste child van het winkelmandje !voor het totaal!
 var tekstLeegMandje = document.getElementById('leeg');
 var nieuweDiv = document.createElement('div');
 var tabel = document.createElement('table');
 var inhetMandje = document.getElementById('winkelmandje');

 nieuweDiv.appendChild(tabel);
 inhetMandje.insertBefore(nieuweDiv, tekstLeegMandje);

var toevoegenAanWinkelMandjeKnop = document.getElementById('toevoegen');
maakKeuzeLijstWinkels();
maakKeuzeLijstGroenten();

  toevoegenAanWinkelMandjeKnop.addEventListener('click', function(e){
    var keuzeWinkel = document.getElementById('winkel');
    var keuzeGroente = document.getElementById('groente');
    var aantalGroente = document.getElementById('aantal');

    var gekozenWinkel = keuzeWinkel.value;
    var gekozenGroente = keuzeGroente.value;
    var ingegevenAantal = aantalGroente.value;
    var foutBericht = "";

    if(gekozenWinkel == ""){foutBericht += 'Kies een winkel ';}
    if(gekozenGroente == ""){foutBericht += ' kies een groente ';}
    if(isNaN(ingegevenAantal) || ingegevenAantal ==  "" || ingegevenAantal == 0 ){foutBericht += ' geef een aantal in'}

    if(foutBericht == ""){
        inWinkelmandjePlaatsen(gekozenGroente,ingegevenAantal, tabel, tekstLeegMandje );
    }
    else{
        window.alert(foutBericht);
    }
  });
  // click functie stopt hier
}
// window onload stopt hier

function maakKeuzeLijstWinkels(){
    var winkelKeuzelijst = document.getElementById('winkel');
    for( var i=0 ; i < winkels.length ; i++ ){
        var option = document.createElement('option');
        option.innerHTML = winkels[i].naam;
        option.value = i;
        var adres = winkels[i].adres + ', ' + winkels[i].post + ' ' + winkels[i].gemeente;
        option.setAttribute('title',adres); // deze werkt niet in microsoft edge/internet explorer(helemaal niets), wel in firefox/chrome/opera !!!!!!
        winkelKeuzelijst.appendChild(option);
    }
}

function maakKeuzeLijstGroenten(){
    var groentenKeuzelijst = document.getElementById('groente');
    for( var i=0 ; i < groentenLijst.length ; i++ ){
        var option = document.createElement('option');
        var groenteNaamEnPrijs = groentenLijst[i][0] + ' ' + '('+ groentenLijst[i][1] + '€' + '/' + groentenLijst[i][2] + ')';
        option.innerHTML = groenteNaamEnPrijs;
        option.value = i;
        groentenKeuzelijst.appendChild(option);
    }
}

function inWinkelmandjePlaatsen(gekozenGroente,ingegevenAantal, tabel, tekstLeegMandje){

    tekstLeegMandje.style.display = 'none';                               // tekst leeg mandje weg

    var naamGekozenGroente = groentenLijst[gekozenGroente][0];
    var prijsGekozenGroente = groentenLijst[gekozenGroente][1];


    var testIdBestaat = document.getElementById(naamGekozenGroente);
    if(testIdBestaat === null){                                          // bestaat de id al ?
        var nieuweRij = document.createElement('tr');
        nieuweRij.setAttribute('id',naamGekozenGroente);
        tabel.appendChild(nieuweRij);
        var dezeRij = document.getElementById(naamGekozenGroente);

        var kolomGroennteNaam = document.createElement('td');
        kolomGroennteNaam.setAttribute('class', 'item');
        var textNode = document.createTextNode(naamGekozenGroente);
        kolomGroennteNaam.appendChild(textNode);
        dezeRij.appendChild(kolomGroennteNaam);

        var kolomAantal = document.createElement('td');
        kolomAantal.setAttribute('class', 'item');
        kolomAantal.id = naamGekozenGroente + 'Aantal';
        var textNode = document.createTextNode(ingegevenAantal);
        kolomAantal.appendChild(textNode);
        dezeRij.appendChild(kolomAantal);

        var kolomPrijs = document.createElement('td');
        kolomPrijs.setAttribute('class', 'item');
        var textNode = document.createTextNode(prijsGekozenGroente);
        kolomPrijs.appendChild(textNode);
        dezeRij.appendChild(kolomPrijs);

        var rijTotaalKolom = document.createElement('td');
        rijTotaalKolom.setAttribute('class', 'celrechts');
        rijTotaalKolom.id = naamGekozenGroente +'Prijs';
        var rijTotaal = prijsGekozenGroente*ingegevenAantal
        var textNode = document.createTextNode(rijTotaal.toFixed(2));
        rijTotaalKolom.appendChild(textNode);
        dezeRij.appendChild(rijTotaalKolom);

        totaalPrijsBerekenen(rijTotaal);
    }
        else{
            var huidigAantal = document.getElementById(naamGekozenGroente + 'Aantal').innerHTML;
            var huidigAantalAanpassen = document.getElementById(naamGekozenGroente + 'Aantal');

            huidigAantal = parseInt(huidigAantal) + parseInt(ingegevenAantal);
            huidigAantalAanpassen.innerHTML = huidigAantal;


            var huidigePrijs = document.getElementById(naamGekozenGroente + 'Prijs');
            var nieuwTotaalRij = huidigAantal * prijsGekozenGroente;
            huidigePrijs.innerHTML = nieuwTotaalRij.toFixed(2);
            totaalPrijsBerekenen(nieuwTotaalRij);
        }
}

function totaalPrijsBerekenen(rijTotaal){
    totaalPrijs += rijTotaal;
    var globaalTotaal = document.getElementById('totNum');
    globaalTotaal.innerHTML = totaalPrijs.toFixed(2);
}