Opvangen NaN en berekening

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Franciscus Elsen

Franciscus Elsen

24/03/2021 09:12:46
Quote Anchor link
Goedemorgen,
Naar aanleiding van een vraag die ik hierhier had gesteld ben ik verder gaan experimenteren met mijn scriptje.

Nu is de situatie (zie code hieronder) dat ik per deeltentamen wil valideren of er een resultaat is ingevoerd. Je kan dus alleen per resultaat op de knop drukken die dan het cijfer print op het scherm. Het kan namelijk zo zijn dat een 'deelnemer' deeltentamen 1 en/of 2 en/of 3 niet maakt. Een deelnemer kan dus niet alle deeltentamens maken, ook één of twee (ongeacht de volgorde). Als dat het geval is dan moet de berekening over het gemiddelde ook aangepast worden want als je twee deeltentamens maakt moet het gemiddelde over twee deeltentamens worden genomen en niet drie. Ik worstel een beetje over hoe ik hier een generieke oplossing voor kan maken.
Ook worstel ik met hoe ik de NaN kan opvangen. Ik zou denken dat ik het vakje waar geen resultaat voor is gewoon leeglaat en op één of andere manier de NaN moet opvangen?

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
<html>
<head>
    <title>Resultaten invoeren</title>
</head>
<body>
Resultaat eerste deeltentamen: <input type = "number" value = "" id = "eersteTentamen"><input type = "submit" name = buttonResultaat1 value = "Resultaten bevestigen" onclick = "berekening()"><br><br>      
Resultaat tweede deeltentamen: <input type = "number" value = "" id = "tweedeTentamen"><input type = "submit" name = buttonResultaat2 value = "Resultaten bevestigen" onclick = "berekening()"><br><br>    
Resultaat derde deeltentamen: <input type = "number" value = "" id = "derdeTentamen"><input type = "submit" name = buttonResultaat2 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 = parseFloat(document.getElementById("eersteTentamen").value);
        var resultaat2 = parseFloat(document.getElementById("tweedeTentamen").value);
        var resultaat3 = parseFloat(document.getElementById("derdeTentamen").value);
        
        var res1 = document.getElementById("res1");
        res1.innerHTML = resultaat1;
        res1.style.color = resultaat1 >= 5.5 ? 'green' : 'red';
        
        var res2 = document.getElementById("res2");
        res2.innerHTML = resultaat2;
        res2.style.color = resultaat2 >= 5.5 ? 'green' : 'red';
        
        var res3 = document.getElementById("res3");
        res3.innerHTML = resultaat3;
        res3.style.color = resultaat3 >= 5.5 ? 'green' : 'red';
                  
        var eindResultaat = ((resultaat1 + resultaat2 + resultaat3) / 3).toFixed(1);
        
        var res = document.getElementById("eindresultaat");
        res.innerHTML = eindResultaat;
        res.style.color = eindResultaat >= 5.5 ? 'green' : 'red';
        
        document.getElementById("eersteTentamen").innerHTML = "";
        document.getElementById("tweedeTentamen").innerHTML = "";
        document.getElementById("derdeTentamen").innerHTML = "";
    }
</script>

</body>
</html>
Gewijzigd op 24/03/2021 09:14:07 door Franciscus Elsen
 
PHP hulp

PHP hulp

28/03/2024 18:45:43
 
Ad Fundum

Ad Fundum

24/03/2021 10:55:33
Quote Anchor link
Not A Number (NaN) situaties kan je opvangen met een controle met de functie isNan(<variabele>).
Zie: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN

De code kan je meer dan de helft kleiner maken door gebruik te maken van JavaScript arrays.
Op dit moment heb ik helaas niet de tijd om het helemaal uit te werken, volgens mij kan je ook best zelf de puzzel oplossen met een vleugje basiskennis van JavaScript. Een tutorial kan je hier vinden: https://www.w3schools.com/js/default.asp
 
Franciscus Elsen

Franciscus Elsen

24/03/2021 14:29:49
Quote Anchor link
Ik heb er nu dit van gemaakt. Ik merk dat mijn algoritmisch denken in hoe het qua code efficiënter kan nog iets is waar ik mee moet oefenen.

Ik wil nu het eindresultaat berekenen. Dat is het gemiddelde over de deeltentamens die een numeriek resultaat hebben. Dus een GR moet niet in de berekening worden meegenomen. Ik zat te denken aan if-else statement (als resultaat1 en/of resultaat 2 GR zijn dan is er maar 1 deeltentamen met een numeriek resultaat; als resultaat 3 een GR heeft dan zijn er 2 deeltentamens met een numeriek resultaat; etc). Maar zo wordt het wel veel if-else statements?

Edit 15:25 uur: ik ben nu zover gekomen dat ik onderstaande script heb. Echter is het eindresultaat een NaN terwijl de waarden goed worden doorgegeven...

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html>
<head>
    <title>Resultaten invoeren</title>
</head>
<body>
Resultaat <b>eerste</b> deeltentamen: <input type = "text" value = "" id = "eersteTentamen"><input type = "submit" name = buttonResultaat1 value = "Resultaat bevestigen" onclick = "berekening1()"><br><br>      
Resultaat <b>tweede</b> deeltentamen: <input type = "text" value = "" id = "tweedeTentamen"><input type = "submit" name = buttonResultaat2 value = "Resultaat bevestigen" onclick = "berekening2()"><br><br>      
Resultaat <b>derde</b> deeltentamen: <input type = "text" value = "" id = "derdeTentamen"><input type = "submit" name = buttonResultaat3 value = "Resultaat bevestigen" onclick = "berekening3()"><br><br>      

<hr>

Resultaat <b>eerste</b> deeltentamen: <span id = "res1"></span><br>
Resultaat <b>tweede</b> deeltentamen: <span id = "res2"></span><br>        
Resultaat <b>derde</b> deeltentamen: <span id = "res3"></span><br><br>    

<hr>
<br>
<input type = "submit" name = eindresultaat value = "Bereken eindresultaat" onclick = "eindResultaat()"><br><br>

<b>Het eindresultaat is: </b> <span id = "eindresultaat"></span>    

<script>
    var resultatenArray = [];
    var eindcijfer, eRes1, eRes2, eRes3;
    
    function berekening1() {
        var resultaat1 = document.getElementById("eersteTentamen").value;
        
        if ((resultaat1 == "GR") || (resultaat1 == "gr")) {
            document.getElementById("res1").innerHTML = "Geen resultaat";
            eRes1 = 0;
            }
            else {
            let res1 = document.getElementById("res1");
            res1.innerHTML = resultaat1;
            res1.style.color = resultaat1 >= 5.5 ? 'green' : 'red';
            document.getElementById("res1").innerHTML = resultaat1;
            eRes1 = resultaat1;
            resultatenArray.push(resultaat1);
            console.log(resultatenArray);
        }
    }
                    
        function berekening2() {
        var resultaat2 = document.getElementById("tweedeTentamen").value;
        
        if ((resultaat2 == "GR") || (resultaat2 == "gr")) {
            document.getElementById("res2").innerHTML = "Geen resultaat";
            eRes2 = 0;
            }
            else {
            let res2 = document.getElementById("res2");
            res2.innerHTML = resultaat2;
            res2.style.color = resultaat2 >= 5.5 ? 'green' : 'red';
            document.getElementById("res2").innerHTML = resultaat2;
            eRes2 = resultaat2;
            resultatenArray.push(resultaat2);
            console.log(resultatenArray);
        }
    }
    
    function berekening3() {
        var resultaat3 = document.getElementById("derdeTentamen").value;
        
        if ((resultaat3 == "GR") || (resultaat3 == "gr")) {
            document.getElementById("res3").innerHTML = "Geen resultaat";
            eRes3 = 0;
            }
            else {
            let res3 = document.getElementById("res3");
            res3.innerHTML = resultaat3;
            res3.style.color = resultaat3 >= 5.5 ? 'green' : 'red';
            document.getElementById("res3").innerHTML = resultaat3;
            eRes3 = resultaat3;
            resultatenArray.push(resultaat3);
            console.log(resultatenArray);
        }
    }
    
    function eindResultaat() {
        var aantalDeelTentamens = resultatenArray.length;
        console.log(aantalDeelTentamens);
        console.log("eRes resultaten:" + eRes1, eRes2, eRes3);
        var eindcijfer = ((eRes1 + eRes2 + eRes3)/aantalDeelTentamens).toFixed(1);
        console.log(eindcijfer);
        document.getElementById("eindresultaat").innerHTML = eindcijfer;
    }
    
</script>

</body>
</html>
Gewijzigd op 24/03/2021 15:24:49 door Franciscus Elsen
 
Ad Fundum

Ad Fundum

24/03/2021 15:59:14
Quote Anchor link
Ik zat meer aan zoiets te denken:
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
<!DOCTYPE html>
<html>
  <head>
    <title>Resultaten invoeren</title>
    <script>
      function werkbij() {
        let totaal = 0, aantal = 0;
        for (let i=1; i<4; i++) {
          let e = document.getElementById('in' + i);
          let invoer = parseFloat(e.value);
          if (isNaN(invoer)) {continue;}
          e.style.color = invoer >= 5.5 ? 'green' : 'red';
          aantal++;
          totaal += invoer;
        }
        let e = document.getElementById('uit');
        e.value = Math.round((totaal / aantal) * 100) / 100;
        e.style.color = e.value >= 5.5 ? 'green' : 'red';
      }
    </script>
    <style>
      label {display:block;margin-top:.5em;}
      .eind {border-top: 1px solid black;padding-top:.5em;}
      span {display:inline-block; width:15em;}
      hr {height:0px;color:lightgrey;}
    </style>
  </head>
  <body>
    <form onchange='werkbij();return false;'>
      <label><span>Eerste deeltentamen</span>
        <input type="number" id="in1" min="1" max="10">
      </label>
      <label><span>Tweede deeltentamen</span>
        <input type="number" id="in2" min="1" max="10">
      </label>
      <label><span>Derde deeltentamen</span>
        <input type="number" id="in3" min="1" max="10">
      </label>
      <label class="eind"><span>Eindresultaat</span>
        <input type="number" id="uit" readonly="readonly">
      </label>
    </form>
  </body>
</html>
 
Franciscus Elsen

Franciscus Elsen

24/03/2021 20:02:51
Quote Anchor link
Ad Fundum op 24/03/2021 15:59:14:
Ik zat meer aan zoiets te denken:
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
<!DOCTYPE html>
<html>
  <head>
    <title>Resultaten invoeren</title>
    <script>
      function werkbij() {
        let totaal = 0, aantal = 0;
        for (let i=1; i<4; i++) {
          let e = document.getElementById('in' + i);
          let invoer = parseFloat(e.value);
          if (isNaN(invoer)) {continue;}
          e.style.color = invoer >= 5.5 ? 'green' : 'red';
          aantal++;
          totaal += invoer;
        }
        let e = document.getElementById('uit');
        e.value = Math.round((totaal / aantal) * 100) / 100;
        e.style.color = e.value >= 5.5 ? 'green' : 'red';
      }
    </script>
    <style>
      label {display:block;margin-top:.5em;}
      .eind {border-top: 1px solid black;padding-top:.5em;}
      span {display:inline-block; width:15em;}
      hr {height:0px;color:lightgrey;}
    </style>
  </head>
  <body>
    <form onchange='werkbij();return false;'>
      <label><span>Eerste deeltentamen</span>
        <input type="number" id="in1" min="1" max="10">
      </label>
      <label><span>Tweede deeltentamen</span>
        <input type="number" id="in2" min="1" max="10">
      </label>
      <label><span>Derde deeltentamen</span>
        <input type="number" id="in3" min="1" max="10">
      </label>
      <label class="eind"><span>Eindresultaat</span>
        <input type="number" id="uit" readonly="readonly">
      </label>
    </form>
  </body>
</html>


Dat is opzicht ook een optie. Wel professioneler neergezet dan mijn code :) ik ga hem bestuderen.

Heb je trouwens ook een idee waarom er in mijn laatste script NaN bij eindcijfer komt? Volgens mij gaat het met de berekening goed en worden de waarden op de juiste manier doorgegeven.

Toevoeging op 25/03/2021 11:39:29:

Met wat gepuzzel ben ik er (denk ik) achtergekomen waarom ik in de functie eindResultaat() NaN krijg. Het heeft als het goed is te maken met dat de variabelen resultaat1, resultaat2, resultaat3 geen waarde hebben binnen deze functie. Alleen binnen de functie waarin ze een waarde krijgen toegekend hebben ze een waarde. Dat heeft met var, let en const te maken is mijn vermoeden. Maar een oplossing hiervoor zie ik niet zo snel (in Java is dat makkelijker :) ).

Toevoeging op 25/03/2021 12:20:45:

vergeef me mijn nieuwsgierigheid en manier van scripten. Ik ben gewoon nieuwsgierig waarom het bij mij niet werk. Ik denk dat ik het probleem heb weten te lokaliseren tot de methode eindResultaat(). Er 'gebeurt' daar iets waardoor er een NaN optreedt. En ik denk dat het ook te maken heeft met het feit dat als er een GR is dat het betreffende resultaat 0.0 moet zijn om mee te nemen in de berekening.

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<html>
<head>
    <title>Resultaten invoeren</title>
</head>
<body>
Resultaat <b>eerste</b> deeltentamen: <input type = "text" value = "" id = "eersteTentamen"><input type = "submit" name = buttonResultaat1 value = "Resultaat bevestigen" onclick = "berekening1()"><br><br>      
Resultaat <b>tweede</b> deeltentamen: <input type = "text" value = "" id = "tweedeTentamen"><input type = "submit" name = buttonResultaat2 value = "Resultaat bevestigen" onclick = "berekening2()"><br><br>      
Resultaat <b>derde</b> deeltentamen: <input type = "text" value = "" id = "derdeTentamen"><input type = "submit" name = buttonResultaat3 value = "Resultaat bevestigen" onclick = "berekening3()"><br><br>      

<hr>

Resultaat <b>eerste</b> deeltentamen: <span id = "res1"></span><br>
Resultaat <b>tweede</b> deeltentamen: <span id = "res2"></span><br>        
Resultaat <b>derde</b> deeltentamen: <span id = "res3"></span><br><br>    

<hr>
<br>
<input type = "submit" name = eindresultaat value = "Bereken eindresultaat" onclick = "eindResultaat()"><br><br>

<b>Het eindresultaat is: </b> <span id = "eindresultaat"></span>    

<script>
    var resultatenArray = [];
    var eindcijfer, eRes1, eRes2, eRes3, resultaat1, resultaat2, resultaat3;
    
    function berekening1() {
        resultaat1 = document.getElementById("eersteTentamen").value;
        console.log("Dit is resultaat1 " + resultaat1);
        
        if ((resultaat1 == "GR") || (resultaat1 == "gr")) {
            document.getElementById("res1").innerHTML = "Geen resultaat";
            eRes1 = 0.0;
            }
            else {
            let res1 = document.getElementById("res1");
            res1.innerHTML = resultaat1;
            res1.style.color = resultaat1 >= 5.5 ? 'green' : 'red';
            document.getElementById("res1").innerHTML = resultaat1;
            //eRes1 = resultaat1;
            resultatenArray.push(resultaat1);
            console.log(resultatenArray);
        }
    }
                    
        function berekening2() {
        resultaat2 = document.getElementById("tweedeTentamen").value;
        console.log("Dit is resultaat2 " + resultaat2);
        
        if ((resultaat2 == "GR") || (resultaat2 == "gr")) {
            document.getElementById("res2").innerHTML = "Geen resultaat";
            eRes2 = 0.0;
            }
            else {
            let res2 = document.getElementById("res2");
            res2.innerHTML = resultaat2;
            res2.style.color = resultaat2 >= 5.5 ? 'green' : 'red';
            document.getElementById("res2").innerHTML = resultaat2;
            //eRes2 = resultaat2;
            resultatenArray.push(resultaat2);
            console.log(resultatenArray);
        }
    }
    
    function berekening3() {
        resultaat3 = document.getElementById("derdeTentamen").value;
        console.log("Dit is resultaat3 " + resultaat3);
        
        if ((resultaat3 == "GR") || (resultaat3 == "gr")) {
            document.getElementById("res3").innerHTML = "Geen resultaat";
            var resultaat3 = 0.0;
            //eRes3 = 0;
            console.log(resultaat3);
            }
            else {
            let res3 = document.getElementById("res3");
            res3.innerHTML = resultaat3;
            res3.style.color = resultaat3 >= 5.5 ? 'green' : 'red';
            document.getElementById("res3").innerHTML = resultaat3;
            //eRes3 = resultaat3;
            resultatenArray.push(resultaat3);
            console.log(resultatenArray);
        }
        console.log(isNaN(resultaat3));
    }
    
    function eindResultaat() {
        var aantalDeelTentamens = resultatenArray.length;
        console.log(aantalDeelTentamens);
        
        console.log("resultaten: " + resultaat1, resultaat2, resultaat3);
        //console.log("eRes resultaten:" + eRes1, eRes2, eRes3);
        
        parseFloat(resultaat1);
        parseFloat(resultaat2);
        parseFloat(resultaat3);
        
        console.log(isNaN(resultaat1));
        console.log(isNaN(resultaat2));
        console.log(isNaN(resultaat3));
        eindcijfer = ((resultaat1 + resultaat2 + resultaat3)/aantalDeelTentamens).toFixed(1);
        //var eindcijfer = ((eRes1 + eRes2 + eRes3)/aantalDeelTentamens).toFixed(1);
        console.log(eindcijfer);
        console.log(isNaN(eindcijfer));
        
        document.getElementById("eindresultaat").innerHTML = eindcijfer;
    }
    
</script>

</body>
</html>
 



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.