Ik ben bezig met dingen uitvogelen in Javascript. Ik heb een applicatie gemaakt die drie getallen invoert en die dan op het scherm (via HTML) wordt geprint. Ook wordt een gemiddelde berekend en op het scherm geprint. Tot zover ben ik tevreden. Echter kom ik er niet uit als ik met voorwaardelijke opmaak wil werken. Dus dat als het resultaat van een deeltentamen kleiner dan 5,5 is dat de letterkleur van dat resultaat rood wordt. Datzelfde wil ik voor het eindresultaat. Als het eindresultaat of de afzonderlijke resultaten een 5.5 of hoger zijn dan moet de kleur groen worden.
Iemand een idee om mij op de juiste weg te helpen?
<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>
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.
?Onbekende gebruiker
17-03-2021 08:59
Zoiets?
let res = document.getElementById("eindresultaat");
res.innerHTML = eindResultaat;
res.style.color = eindResultaat >= 5.5 ? 'green' : 'red';
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:
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');
}
}
Edit: Ik vind de ternary oplossing van Ad Fundum ook wel netjes, zoals je ziet zijn er meerdere wegen die naar Rome leiden.
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:
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');
}
}
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.
