krijg velden niet toegevoegd in div, classes

Door davy janssens op 28-01-2020 09:10 gewijzigd op 28-01-2020 09:18

1.406 views

Beste,

Ben nog een leek in Javascript maar volop aan het oefenen. Maar ben al een tijd aan het zoeken (W3 Schools, Stackoverflow) maar krijg het niet gevonden. Hopelijk kan iemand me op weg helpen. Validatie werkt wel. Hieronder eerst de HTML Code en daaronder Javascript

HTML


<!doctype html>
<html lang="nl">

<head>
    <script src="computers.js" defer></script>
    <title>Personen</title>
    <link rel="icon" href="javascript.ico" type="image/x-icon">
    <link rel="stylesheet" href="default.css">
</head>

<body>
    
    <label for="computer">Gekozen computer:
        <span id="computerFout" class="fout" name="computer">Kies een computer om toe te voegen.</span>
            <select id="computer" required>
                <option  value="">--- maak uw keuze ---</option>
              
            </select>


    </label>
    <label>Aantal computers: 
         <span id="aantalFout" class="fout">Geef een aantal in! (min 1)</span>
         <input id="aantal" required type="number" min="1">
    </label>
    <button id="toevoegen">Toevoegen</button>
    <div id="winkelmandje">
        <h2>Winkelmandje</h2>
        <div class="item" id="leeg">mijn mandje is leeg </div> 
        <div class="item" id="totaal"><div class='vak vaklinks' id="totTekst">Totaal</div><div id="totNum" class='vak vakrechts'>0</div>
    </div>
    <!-- <table>
        <thead>
            
        </thead>
        <tbody>

        </tbody>
    </table> -->
</body>

</html>

JAVASCRIPT


"use strict";

//array met alle groenten
let aComputers= [
    ["macbook air", 1925.95, "stuk"],
    ["macbook pro", 2548.69, "stuk"],
    ["Asus", 1258.93, "stuk"],
    ["Dell", 1359.29, "stuk"],
];
let verkeerdeElementen;

computersVullen();


//opties van select element met id computer invullen

function computersVullen() {
    let eComputers = document.getElementById("computer");
    let eDF = document.createDocumentFragment();

    for (let i = 0; i < aComputers.length; i++) {
        let eOption = document.createElement("option");

        //computer option samenstellen
        let sValue = document.createTextNode(aComputers[i][0] + " (" + aComputers[i][1] + " €" + aComputers[i][2] + ")");
        eOption.appendChild(sValue);
        eDF.appendChild(eOption);
    }

    eComputers.appendChild(eDF);
}

document.getElementById("toevoegen").onclick = function () {
    verkeerdeElementen=
    document.querySelectorAll("input:invalid,select:invalid"); 
    for (const element of verkeerdeElementen) {
    document.getElementById(`${element.id}Fout`).style.display = "inline"; 
    }
    
    const correcteElementen =
    document.querySelectorAll("input:valid,select:valid"); 
    for (const element of correcteElementen) {
    document.getElementById(`${element.id}Fout`).style.display = ""; 
    }

    if (verkeerdeElementen.length === 0) {
        computerToevoegen();
    }
    }

    function computerToevoegen() {
    let eTotaal = document.getElementById("totaal");
    let eLeeg = document.getElementById("leeg");
    let eRij = document.createElement("div");
    eRij.className = "item keuze";
    
    //rij met "mijn mandje is leeg" verbergen
    eLeeg.style.display = "none";

    //gekozen aantal in winkelmandje zetten en in winkelmandje zetten
    var eComputer = document.createElement("div");
    eComputer.className = "vak vaklinks computer";
    var arrComputer = computer.value.split(" (");//split computer naam van stukprijs
    var sComputer = document.createTextNode(arrComputer[0]);
    eComputer.appendChild(sComputer);
    eRij.appendChild(eComputer);
    }

- Ariën -

28-01-2020 09:14 gewijzigd op 28-01-2020 09:22

Kan je dit tussen code-tags zetten?
Dan is het beter leesbaarder.

Heb je al in de debug-console van je browser gekeken?

Jan R

28-01-2020 09:48

Je probeerd let eComputers = document.getElementById("computer") terwijl de dom nog niet volledig is geladen.
Je moet wachten tot alles klaar is om je elementen aan te spreken.


    computersVullen();

wordt dus


window.addEventListener('DOMContentLoaded', (event) => {
    computersVullen();
});

davy janssens

28-01-2020 11:36

heb dit aangepast maar doet nog niks


"use strict";

//array met alle groenten
let aComputers= [
    ["macbook air", 1925.95, "stuk"],
    ["macbook pro", 2548.69, "stuk"],
    ["Asus", 1258.93, "stuk"],
    ["Dell", 1359.29, "stuk"],
];
let verkeerdeElementen;

window.addEventListener('DOMContentLoaded', (event) => {
    computersVullen();
});


//opties van select element met id computer invullen

function computersVullen() {
    let eComputers = document.getElementById("computer");
    let eDF = document.createDocumentFragment();

    for (let i = 0; i < aComputers.length; i++) {
        let eOption = document.createElement("option");

        //computer option samenstellen
        let sValue = document.createTextNode(aComputers[i][0] + " (" + aComputers[i][1] + " €" + aComputers[i][2] + ")");
        eOption.appendChild(sValue);
        eDF.appendChild(eOption);
    }

    eComputers.appendChild(eDF);
}

document.getElementById("toevoegen").onclick = function () {
    verkeerdeElementen=
    document.querySelectorAll("input:invalid,select:invalid"); 
    for (const element of verkeerdeElementen) {
    document.getElementById(`${element.id}Fout`).style.display = "inline"; 
    }
    
    const correcteElementen =
    document.querySelectorAll("input:valid,select:valid"); 
    for (const element of correcteElementen) {
    document.getElementById(`${element.id}Fout`).style.display = ""; 
    }

    if (verkeerdeElementen.length === 0) {
        computerToevoegen();
    }
    }

    function computerToevoegen() {
    let eTotaal = document.getElementById("totaal");
    let eLeeg = document.getElementById("leeg");
    let eRij = document.createElement("div");
    eRij.className = "item keuze";
    
    //rij met "mijn mandje is leeg" verbergen
    eLeeg.style.display = "none";

    //gekozen aantal in winkelmandje zetten en in winkelmandje zetten
    var eComputer = document.createElement("div");
    eComputer.className = "vak vaklinks computer";
    var sComputer = document.createTextNode(arrComputer[0]);
    eComputer.appendChild(sComputer);
    eRij.appendChild(eComputer);
    }

- Ariën -

28-01-2020 11:42

Check je Javascript console eens. Die meldt wel mogelijk errors.

Reageren

Inloggen om te reageren