Voorwaardelijke opmaak
Iemand een idee om mij op de juiste weg te helpen?
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
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
<html>
<head>
<title>Resultaten invoeren</title>
</head>
<body>
Resultaat eerste deeltentamen: <input type = "number" value = "" id = "eersteTentamen"> <br>
Resultaat tweede deeltentamen: <input type = "number" value = "" id = "tweedeTentamen"> <br>
Resultaat derde deeltentamen: <input type = "number" value = "" id = "derdeTentamen"> <br><br>
<input type = "submit" value = "Resultaten bevestigen" onclick = "berekening()"><br><br>
Resultaat eerste deeltentamen: <span id = "res1"></span><br>
Resultaat tweede deeltentamen: <span id = "res2"></span><br>
Resultaat derde deeltentamen: <span id = "res3"></span><br><br>
<b>Het eindresultaat is: </b> <span id = "eindresultaat"></span>
<script>
function berekening() {
var resultaat1 = parseInt(document.getElementById("eersteTentamen").value);
var resultaat2 = parseInt(document.getElementById("tweedeTentamen").value);
var resultaat3 = parseInt(document.getElementById("derdeTentamen").value);
document.getElementById("res1").innerHTML = resultaat1;
document.getElementById("res2").innerHTML = resultaat2;
document.getElementById("res3").innerHTML = resultaat3;
var eindResultaat = ((resultaat1 + resultaat2 + resultaat3)/3).toFixed(1);
document.getElementById("eindresultaat").innerHTML = eindResultaat;
}
</script>
</body>
</html>
<head>
<title>Resultaten invoeren</title>
</head>
<body>
Resultaat eerste deeltentamen: <input type = "number" value = "" id = "eersteTentamen"> <br>
Resultaat tweede deeltentamen: <input type = "number" value = "" id = "tweedeTentamen"> <br>
Resultaat derde deeltentamen: <input type = "number" value = "" id = "derdeTentamen"> <br><br>
<input type = "submit" value = "Resultaten bevestigen" onclick = "berekening()"><br><br>
Resultaat eerste deeltentamen: <span id = "res1"></span><br>
Resultaat tweede deeltentamen: <span id = "res2"></span><br>
Resultaat derde deeltentamen: <span id = "res3"></span><br><br>
<b>Het eindresultaat is: </b> <span id = "eindresultaat"></span>
<script>
function berekening() {
var resultaat1 = parseInt(document.getElementById("eersteTentamen").value);
var resultaat2 = parseInt(document.getElementById("tweedeTentamen").value);
var resultaat3 = parseInt(document.getElementById("derdeTentamen").value);
document.getElementById("res1").innerHTML = resultaat1;
document.getElementById("res2").innerHTML = resultaat2;
document.getElementById("res3").innerHTML = resultaat3;
var eindResultaat = ((resultaat1 + resultaat2 + resultaat3)/3).toFixed(1);
document.getElementById("eindresultaat").innerHTML = eindResultaat;
}
</script>
</body>
</html>
Een voorbeeldje: https://codepen.io/frankbeen/pen/qBqweQP
Frank Nietbelangrijk op 17/03/2021 00:55:57:
Kijjk eens naar classlist.add(), classlist.remove() en classlist.toggle()
Een voorbeeldje: https://codepen.io/frankbeen/pen/qBqweQP
Een voorbeeldje: https://codepen.io/frankbeen/pen/qBqweQP
Leuk voorbeeldje inderdaad. Wel van een hoger niveau. Ik zat zelf eerder aan if-else statements te denken. Net zoals in Excel je zegmaar op zo een manier een voorwaardelijke opmaak kan geven.
Ik ga even kijken of ik dat voorbeeldje kan matchen met wat ik zou willen.
Code (php)
1
2
3
2
3
let res = document.getElementById("eindresultaat");
res.innerHTML = eindResultaat;
res.style.color = eindResultaat >= 5.5 ? 'green' : 'red';
res.innerHTML = eindResultaat;
res.style.color = eindResultaat >= 5.5 ? 'green' : 'red';
Bij het HTML-element input van het type number kun je een bereik opgeven met de attributen min en max:
Code (php)
1
<input min="5.5" max="10" type="number" value="5.4">
Voor de opmaak van waarden buiten het bereik van min en max kun je vervolgens de speciale CSS-selector out-of-range gebruiken:
Code (php)
1
2
3
2
3
input:out-of-range {
color: #f44336;
}
color: #f44336;
}
Even snel in elkaar getikt dus geen garantie en je moet zelf de kleur classes toevoegen:
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
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
function berekening() {
var resultaat1 = parseInt(document.getElementById("eersteTentamen").value);
var resultaat2 = parseInt(document.getElementById("tweedeTentamen").value);
var resultaat3 = parseInt(document.getElementById("derdeTentamen").value);
document.getElementById("res1").innerHTML = resultaat1;
document.getElementById("res2").innerHTML = resultaat2;
document.getElementById("res3").innerHTML = resultaat3;
// Aparte var omdat we een numerieke waarde willen
var numResultaat = (resultaat1 + resultaat2 + resultaat3) / 3;
var eindResultaat = numResultaat.toFixed(1);
document.getElementById("eindresultaat").innerHTML = eindResultaat;
// Dit is dus nieuw
stelKleurIn("res1", resultaat1);
stelKleurIn("res2", resultaat2);
stelKleurIn("res3", resultaat3);
stelKleurIn("eindresultaat", numResultaat);
}
// Deze functie regelt het instellen van de kleur classes
function stelKleurIn(element, cijfer) {
if (cijfer < 5.5) {
document.getElementById(element).classList.add('rood');
document.getElementById(element).classList.remove('groen');
} else {
document.getElementById(element).classList.add('groen');
document.getElementById(element).classList.remove('rood');
}
}
var resultaat1 = parseInt(document.getElementById("eersteTentamen").value);
var resultaat2 = parseInt(document.getElementById("tweedeTentamen").value);
var resultaat3 = parseInt(document.getElementById("derdeTentamen").value);
document.getElementById("res1").innerHTML = resultaat1;
document.getElementById("res2").innerHTML = resultaat2;
document.getElementById("res3").innerHTML = resultaat3;
// Aparte var omdat we een numerieke waarde willen
var numResultaat = (resultaat1 + resultaat2 + resultaat3) / 3;
var eindResultaat = numResultaat.toFixed(1);
document.getElementById("eindresultaat").innerHTML = eindResultaat;
// Dit is dus nieuw
stelKleurIn("res1", resultaat1);
stelKleurIn("res2", resultaat2);
stelKleurIn("res3", resultaat3);
stelKleurIn("eindresultaat", numResultaat);
}
// Deze functie regelt het instellen van de kleur classes
function stelKleurIn(element, cijfer) {
if (cijfer < 5.5) {
document.getElementById(element).classList.add('rood');
document.getElementById(element).classList.remove('groen');
} else {
document.getElementById(element).classList.add('groen');
document.getElementById(element).classList.remove('rood');
}
}
Edit: Ik vind de ternary oplossing van Ad Fundum ook wel netjes, zoals je ziet zijn er meerdere wegen die naar Rome leiden.
Gewijzigd op 17/03/2021 09:10:39 door Thom nvt
Thom nvt op 17/03/2021 09:08:06:
Als je het netjes opsplitst in een aparte functie voorkom je ook dat het een zooitje van if-else statements word.
Even snel in elkaar getikt dus geen garantie en je moet zelf de kleur classes toevoegen:
Edit: Ik vind de ternary oplossing van Ad Fundum ook wel netjes, zoals je ziet zijn er meerdere wegen die naar Rome leiden.
Even snel in elkaar getikt dus geen garantie en je moet zelf de kleur classes toevoegen:
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
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
function berekening() {
var resultaat1 = parseInt(document.getElementById("eersteTentamen").value);
var resultaat2 = parseInt(document.getElementById("tweedeTentamen").value);
var resultaat3 = parseInt(document.getElementById("derdeTentamen").value);
document.getElementById("res1").innerHTML = resultaat1;
document.getElementById("res2").innerHTML = resultaat2;
document.getElementById("res3").innerHTML = resultaat3;
// Aparte var omdat we een numerieke waarde willen
var numResultaat = (resultaat1 + resultaat2 + resultaat3) / 3;
var eindResultaat = numResultaat.toFixed(1);
document.getElementById("eindresultaat").innerHTML = eindResultaat;
// Dit is dus nieuw
stelKleurIn("res1", resultaat1);
stelKleurIn("res2", resultaat2);
stelKleurIn("res3", resultaat3);
stelKleurIn("eindresultaat", numResultaat);
}
// Deze functie regelt het instellen van de kleur classes
function stelKleurIn(element, cijfer) {
if (cijfer < 5.5) {
document.getElementById(element).classList.add('rood');
document.getElementById(element).classList.remove('groen');
} else {
document.getElementById(element).classList.add('groen');
document.getElementById(element).classList.remove('rood');
}
}
var resultaat1 = parseInt(document.getElementById("eersteTentamen").value);
var resultaat2 = parseInt(document.getElementById("tweedeTentamen").value);
var resultaat3 = parseInt(document.getElementById("derdeTentamen").value);
document.getElementById("res1").innerHTML = resultaat1;
document.getElementById("res2").innerHTML = resultaat2;
document.getElementById("res3").innerHTML = resultaat3;
// Aparte var omdat we een numerieke waarde willen
var numResultaat = (resultaat1 + resultaat2 + resultaat3) / 3;
var eindResultaat = numResultaat.toFixed(1);
document.getElementById("eindresultaat").innerHTML = eindResultaat;
// Dit is dus nieuw
stelKleurIn("res1", resultaat1);
stelKleurIn("res2", resultaat2);
stelKleurIn("res3", resultaat3);
stelKleurIn("eindresultaat", numResultaat);
}
// Deze functie regelt het instellen van de kleur classes
function stelKleurIn(element, cijfer) {
if (cijfer < 5.5) {
document.getElementById(element).classList.add('rood');
document.getElementById(element).classList.remove('groen');
} else {
document.getElementById(element).classList.add('groen');
document.getElementById(element).classList.remove('rood');
}
}
Edit: Ik vind de ternary oplossing van Ad Fundum ook wel netjes, zoals je ziet zijn er meerdere wegen die naar Rome leiden.
Dankje, jouw voorbeeld is het bestuderen even waard. Ad Fundum zijn voorbeeld is wat makkelijker maar moet je maar net op die ternary komen. En ik ben het met je eens, ook wat netter.
Dit topic is gesloten.