krijg velden niet toegevoegd in div, classes

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Davy janssens

davy janssens

28/01/2020 09:10:51
Quote Anchor link
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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
"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);
    }
Gewijzigd op 28/01/2020 09:18:58 door Davy janssens
 
PHP hulp

PHP hulp

28/02/2020 19:02:37
 
- Ariën -
Beheerder

- Ariën -

28/01/2020 09:14:55
Quote Anchor link
Kan je dit tussen code-tags zetten?
Dan is het beter leesbaarder.


Heb je al in de debug-console van je browser gekeken?
Gewijzigd op 28/01/2020 09:22:47 door - Ariën -
 
Jan R

Jan R

28/01/2020 09:48:50
Quote Anchor link
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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
    computersVullen();

wordt dus
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
window.addEventListener('DOMContentLoaded', (event) => {
    computersVullen();
});
 
Davy janssens

davy janssens

28/01/2020 11:36:05
Quote Anchor link
heb dit aangepast maar doet nog niks

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
"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 -
Beheerder

- Ariën -

28/01/2020 11:42:32
Quote Anchor link
Check je Javascript console eens. Die meldt wel mogelijk errors.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.