krijg velden niet toegevoegd in div, classes
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)
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
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>
<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)
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
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);
}
//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
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 -
Je moet wachten tot alles klaar is om je elementen aan te spreken.
Code (php)
1
computersVullen();
wordt dus
Code (php)
1
2
3
2
3
window.addEventListener('DOMContentLoaded', (event) => {
computersVullen();
});
computersVullen();
});
Code (php)
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
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);
}
//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);
}