Waarom resultaat NaN in javaScript?

Status
Niet open voor verdere reacties.
S

Steven01567644335

Gebruiker
Lid geworden
14 mei 2022
Berichten
52
Hallo, kijk vooral naar de JavaScript code. Waarom geeft het resultaat van de deling steeds een NaN? hoe los ik dit op?:)

Code: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS PF taak: deling</title>
</head>
<body>
<h1>Javascript PF taak: Deling</h1>
<h3>Opdracht: </h3>
<ul>
    <li>Lees twee getallen in. Deel het grootste door het kleinste en toon het resultaat in het <em>output element</em>. </li>
    <li>ook negatieve getallen zijn toegelaten</li>
    <li>herinner de gebruiker er aan dat je niet mag delen door 0. Waarschuw de gebruiker in een <em>berichtenvenster</em></li>
    <li>we veronderstellen dat de input echt een getal is, <em>valideren</em> moet je nog niet doen</li>
</ul>
<h3>Geteste topics</h3>
<ul>
    <li>programmatielogica : selectie</li>
</ul>
<h3>Oplossing: </h3>

<form name="frmDeling" id="frmDeling">
<p>
    <label for="getal1">getal 1</label>
    <input name="getal1" id="getal1" type="text">
</p>
<p>
    <label for="getal2">getal 2</label>
    <input name="getal2" id="getal2" type="text">
</p>
<p>
    <button type="button" id="deKnop">Bereken deling</button>
</p>
</form>

<div class="vb" id="output"></div>

<script>
window.onload = function(){
}

var eKnop     = document.querySelector('#deKnop');
eKnop.onclick = deling;
var eGetal1   = document.getElementById("getal1");
var eGetal2   = document.getElementById("getal2");
var sBericht  = "Het resultaat van uw deling is ";
var nGetal1   = parseInt(eGetal1.value);
var nGetal2   = parseInt(eGetal2.value);

function deling(){
        if(nGetal1>=nGetal2 && nGetal1!=0 && nGetal2!=0){
            var kleinste = nGetal2;
            console.log(sBericht + kleinste);
        }
        if (nGetal1<=nGetal2 && nGetal1!=0 && nGetal2!=0){
            var grootste = nGetal2;
            console.log(sBericht + grootste);
        }
        if (kleinste==0 | grootste==0){
            alert("Men kan niet delen door nul.");
        }
        var nTotaal= grootste/kleinste;
        sBericht = sBericht + nTotaal;
        var eOutput = document.querySelector('#output');
        eOutput.innerHTML = sBericht;
}
</script>
</body>
</html>
 
Laatst bewerkt door een moderator:
De bug is dat je de variabelen kleinste en grootste in een verschillende if statement declareert. Daardoor is eentje niet gedefinieerd bij je berekening. Je zal in beide if statements deze 2 variabelen een waarde moeten geven.

Verder heb ik van een | een dubbele || gemaakt en de onclick weggehaald.

Code: 
<script>
window.onload = function(){
}

var eKnop = document.querySelector('#deKnop');
eKnop.addEventListener("click", deling);

function deling () {

    var eGetal1  = document.getElementById("getal1");
    var eGetal2  = document.getElementById("getal2");
    var sBericht = "Het resultaat van uw deling is ";
    var nGetal1  = parseInt(eGetal1.value);
    var nGetal2  = parseInt(eGetal2.value);

    var kleinste;
    var grootste;

    if(nGetal1 >= nGetal2) {
        grootste = nGetal1;
        kleinste = nGetal2;
    }
    else if (nGetal1 < nGetal2){
        grootste = nGetal2;
        kleinste = nGetal1;
    }

    if (kleinste == 0){
        alert("Men kan niet delen door nul.");
    } else {
        var nTotaal = grootste / kleinste;
        sBericht = sBericht + nTotaal;
        var eOutput = document.querySelector('#output');
        eOutput.innerHTML = sBericht;
    }
}
</script>
 
Laatst bewerkt:
Dit lijkt niet te helpen. Nu geeft hij geen enkele boodschap meer weer onderaan.

toch bedankt voor je hulp.

groetjes,

steven
:confused:
 
Ik vermoed dat je ergens een copy/paste foutje van mijn Javascript hebt zitten. Bij mij werkt alles goed :)

deling.jpg

Voor de zekerheid jouw hele script met mijn aanpassingen
Code: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS PF taak: deling</title>
</head>
<body>
<h1>Javascript PF taak: Deling</h1>
<h3>Opdracht: </h3>
<ul>
    <li>Lees twee getallen in. Deel het grootste door het kleinste en toon het resultaat in het <em>output element</em>. </li>
    <li>ook negatieve getallen zijn toegelaten</li>
    <li>herinner de gebruiker er aan dat je niet mag delen door 0. Waarschuw de gebruiker in een <em>berichtenvenster</em></li>
    <li>we veronderstellen dat de input echt een getal is, <em>valideren</em> moet je nog niet doen</li>
</ul>
<h3>Geteste topics</h3>
<ul>
    <li>programmatielogica : selectie</li>
</ul>
<h3>Oplossing: </h3>


<form name="frmDeling" id="frmDeling">
<p>
    <label for="getal1">getal 1</label>
    <input name="getal1" id="getal1" type="text">
</p>
<p>
    <label for="getal2">getal 2</label>
    <input name="getal2" id="getal2" type="text">
</p>
<p>
    <button type="button" id="deKnop">Bereken deling</button>
</p>
</form>


<div class="vb" id="output"></div>


<script>
window.onload = function(){
}


var eKnop = document.querySelector('#deKnop');
eKnop.addEventListener("click", deling);


function deling () {


    var eGetal1  = document.getElementById("getal1");
    var eGetal2  = document.getElementById("getal2");
    var sBericht = "Het resultaat van uw deling is ";
    var nGetal1  = parseInt(eGetal1.value);
    var nGetal2  = parseInt(eGetal2.value);


    var kleinste;
    var grootste;


    if(nGetal1 >= nGetal2) {
        grootste = nGetal1;
        kleinste = nGetal2;
    }
    else if (nGetal1 < nGetal2){
        grootste = nGetal2;
        kleinste = nGetal1;
    }


    if (kleinste == 0){
        alert("Men kan niet delen door nul.");
    } else {
        var nTotaal = grootste / kleinste;
        sBericht = sBericht + nTotaal;
        var eOutput = document.querySelector('#output');
        eOutput.innerHTML = sBericht;
    }
}
</script>


</body>
</html>
 
Laatst bewerkt:
Het werkt toch niet bij mij.

Ik heb ge copy/paste, maar dan geeft hij ineens geen resultaat. Kan het misschien aan de Else lus liggen?

met ‘vriendelijke Groeten,

jan
 
Het hele script in #4. Werkt dit bij jou ook?
 
Nu heb ik het hele bestand gekopieerd en nu werkt het ineens…
Klik om te vergroten...
Top :thumb:

waarom maak je geen gebruik van onclick?
Klik om te vergroten...
Een onclick methode is een goed statement maar soms minder handig. De onclick vervangt de gehele werking van een click event terwijl de addEventListener een event toevoegt. De onclick versie zou er zo uit zien
Code: 
var eKnop = document.querySelector('#deKnop');
eKnop.onclick = deling;

Linkje "Attendeer moderator" en linkje "Prevébericht"
Klik om te vergroten...
Attendeer moderator : gebruiken bij kwalijke teksten
Prevébericht : gebruiken als iemand anders dit vraagt
 
Laatst bewerkt:
Problemen om output te geven na wiskundige berekeningen

:cool:Hallo,

ik heb een soortgelijk bestand gemaakt, maar deze keer geeft hij geen output weer. Waarschijnlijk zijn mijn wiskundige berekeningen niet volgens de regeltjes van de kunst, maar dan nog zou hij normaal gezien output moeten geven. Het kan altijd zo zijn dat er een haakje of accolade vergeten of teveel is, maar de console specificeert niet op welke regelnummer.
 
Javascript stopt met de uitvoering van een script bij een syntax fout.
Misschien heb je ergens een foutje zitten zodat het script stopt en nooit bij het weergeven van de output komt.
 
Kindergeld

Van dit bestand weet ik de oplossing, alhoewel deze verschilt van de mijne, maar kan er eens nagekeken worden waar ik een ( of { vergeten ben?
Code: 
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>JS PF taak: kindergeld</title>
<style media="screen" type="text/css">
<!--
label {
    display:inline-block;
    width:100px;
}
div.vb {
    background-color:#CCFFCC;
    padding:1em;
}
-->
</style>
</head>
<body>
<h1>Javascript PF taak: kindergeld</h1>

<h3>Opdracht: </h3>
<ul>
<li>Een moeder heeft recht op € 25,00 kindergeld per kind. Voor het   
derde kind (en elk volgend kind) krijgt ze een toeslag van € 12,50. 
Voor het vijfde (en elk volgend) kind krijgt ze nog eens een 
toeslag van € 7,50.</li>
<li>Als het maandloon van de moeder kleiner is dan of gelijk aan €    
500,00, dan krijgt ze 25% toeslag op het kindergeld. Maar als haar   
maandloon groter is dan € 2000,00, dan krijgt ze 45% minder 
kindergeld.</li>
<li> Minimaal heeft een moeder altijd recht op € 25,00 per kind.</li>
<li>Vul aantal kinderen en maandloon in, en <i>toon in het outputelement</i> het kindergeld waar de moeder recht op heeft. </li>
<li>indien een 0 of een negatief getal wordt ingevuld voor kinderen of maandloon, <em>waarschuw in een berichtenvenster</em></li>
<li>Bijv. : 6 kinderen en € 1 500,00 maandloon à € 215,00 kindergeld</li>
<li>validatie van getallen mag ook hier nog achterwege blijven</li>
</ul>

<h3>Geteste topics</h3>
<ul>
<li>programmatielogica : selectie</li>
</ul>
<h3>Oplossing: </h3>

<form name="frmKindergeld" id="frmKindergeld" method="get" action="">
<p>
<label for="kinderen">aantal kinderen</label>
<input type="text" name="kinderen" id="kinderen">
</p>
<p>
<label for="maandloon">maandloon</label>
<input type="text" name="maandloon" id="maandloon">
</p>
<p>
<button type="button" id="deKnop">Bereken kindergeld</button>
</p>
</form> 

<div class="vb" id="output"></div>

<script>
window.onload = function(){
    var eKnop = document.querySelector('#deKnop');
    eKnop.addEventListener("click", kinder);
}

var x=0
var eOutput = document.getElementById('output')
var kinderen = document.getElementById('kinderen')
var maandloon =document.getElementById('maandloon')
kinderen = parseInt(kinderen.value)
maandloon = parseInt(maandloon.value)
var sBericht="U heeft recht op "

function kinder(){
    if(kinderen>2){x=x+12,50}
    if(kinderen>4){x=x+7,50}
    if(kinderen>5){x=x+7,50}
    if(kinderen>6){x=x+7,50}
    console.log(x);
    if(maandloon<=500){x=x+25%}
    if(maandloon>2000){x=x-45%}
    else if(maandloon<500){
        kinderen=kinderen*25;
        let x=kinderen;
    }
    if(maandloon<1&&kinderen<1){
        alert('Geen kinderen, geen geld');
    }
}

sBericht = sBericht + x;
var eOutput = document.querySelector('#output');
eOutput.innerHTML = sBericht;
console.log(sBericht + x);
</script>
</body>
</html>


mod. javascript uitgelijnd voor leesbaarheid
 
Laatst bewerkt door een moderator:
Zet het even tussen code-tags voor goede opmaak hier.
 
Een paar tips om foutjes eruit te halen.

In programmeertalen gebruik je een . (punt) voor decimalen. Het is dus 7.50 en niet 7,50

De % mag niet worden gebruikt om een percentage te berekenen.
x = x + 25% mag niet op deze manier. Je kan dit oplossen met x = x * 1.25

Je kan foutmeldingen voorkomen door elke regel af te sluiten met een ; (puntkomma)
De ; weglaten kan prima maar dit is meer voor gevorderden.

Omdat het script onderaan staat is window.onload niet nodig, alle html elementen zijn dan al bekend.

Nu is het weer aan jou om dit toe te passen. Als je een vraag hebt hoor ik het wel.
 
Wat je wilt gaan berekenen, of hoe je dat wilt doen weet ik niet.
Het is wel goed om dingen te ordenen, zet bij elkaar wat bij elkaar hoort.

Alle if (maandloon .....) begrijp ik niet, die kan je zelf bekijken ;)

Code: 
<script>
var kinderen  = document.querySelector('#kinderen');
var maandloon = document.querySelector('#maandloon');
var eKnop     = document.querySelector('#deKnop');
var eOutput   = document.querySelector('#output');
var sBericht  = "U heeft recht op ";

eKnop.addEventListener("click", kinder);

function kinder(){

    kinderen  = parseInt(kinderen.value);
    maandloon = parseInt(maandloon.value);

    var x = 0;
    if (kinderen > 2) x = x + 12.50;
    if (kinderen > 4) x = x + 7.50;
    if (kinderen > 5) x = x + 7.50;
    if (kinderen > 6) x = x + 7.50;

    if (maandloon <= 500) {
        x = x * 1.25;
    }

    if (maandloon > 2000) {
        x = x * 0.55;
    }
    else if (maandloon < 500) {
        kinderen = kinderen * 25;
        let x = kinderen;
    }

    if (maandloon < 1 || kinderen < 1){
        alert('Geen kinderen of geen geld');
    }

    console.log(sBericht + x);
    sBericht = sBericht + x;
    eOutput.innerHTML = sBericht;
}
</script>
 
Laatst bewerkt:
Faculteit berekenen

Ik vind JavaScript een moeilijke taal omdat deze taal niet vergevingsgezind lijkt. Bij ieder haakje of accolade dat er te veel of te weinig staat, stopt het programma inderdaad met de uitvoering.

Ik begrijp dat het niet de bedoeling kan zijn dat ieder bestand dat ik voorleg, verbeterd kan worden. Maar heb je misschien tips waar ik de bal mis sla?

Meestal als ik oplossing zie, weet ik waar ik in de fout ben gegaan, maar met dit bestand ben ik aan het zoeken geweest zonder een oplossing te vinden.

Toch ben ik geïnteresseerd in JavaScript vooral omdat het informatie kan halen en schrijven naar cookies.

Code: 
<!DOCTYPE html><html lang="nl/be">
  <head>
    <meta http-equiv="content-type" content="text/html; charset="utf-8">
    <title>JS PF taak: faculteit</title>
  </head>
  <body>
    <h1>Javascript PF taak: Faculteit</h1>
    <h3>Opdracht: </h3>
    <ul>
      <li>De faculteit van een geheel getal is het product van alle gehele
        getallen van 1 t.e.m. het getal zelf. Bijv: 5! = 1 * 2 * 3 * 4 * 5 =
        120. </li>
      <li> We veronderstellen dat een getal ingegeven wordt, valideer dat met de functie <code>isNaN()</code></li>
      <li>Opgelet: de faculteit van 0 (0!) is 1, en de faculteit van een negatief getal bestaat niet. </li>
      <li>Indien de invoer goed is toont het de faculteit van dat getal in het
        outputelement. </li>
      <li>denk er aan decimale getallen in te geven met de decimale punt notatie, gebruik geen komma: 1.54</li>
    </ul>
    <h3>Geteste topics</h3>
    <ul>
      <li>programmatielogica : iteratie</li>
    </ul>
    <h3>Oplossing: </h3>
    <form name="frmFaculteit" id="frmFaculteit">
      <p>
        <label for="getal">getal</label>
        <input name="getal" id="getal" type="text">
      </p>
      <p>
        <button type="button" id="deKnop">Bereken faculteit</button></p>
    </form>
    <div class="vb" id="output"></div>
    <script>
window.onload = function (){
var nGetal = document.getElementById('getal');
var eGetal=getal;
var nFac = nGetal;
var nFac = parseInt(nGetal.value);
var sBericht="De faculteit is ";
var eKnop = document.querySelector('#deKnop');
eKnop.onclick = evalueer;
function evalueer(){
 var nGetal = parseInt(document.getElementById('getal').value);
 if(isNaN=0) { alert('Gelieve een waarde in te voeren');
} 
function isNumeric(nGetal) { 
      return !isNaN(parseFloat(nGetal)) && isFinite(nGetal);
}
nFac = document.getElementById('getal');
while(nGetal > 2){
	nGetal -= 1;
	nFac *= nGetal;
}
document.getElementById('getal');
var eOutput = document.querySelector('#output');
eOutput.innerHTML = sBericht + nFac;
console.log(sBericht + nFac);
} 
}
</script>
</body>
</html>
 
Ik vind JavaScript een moeilijke taal omdat deze taal niet vergevingsgezind lijkt
Klik om te vergroten...
Optie 1: klik met rechts in je browser en kies "Inspecteren". Er opent een extra deelscherm en daar kies je bovenin voor tabje "Console". Mogelijke fouten worden daar (weliswaar summier) weergegeven met het regelnummer.
Optie 2: een uitgebreide gratis editor "Visual Studio Code" die geeft tijdens het programmeren al veel meer foutjes aan (met een kleurtje of streepje) maar het is eigenlijk geen editor voor beginners ;)

Ik zal je code zo meteen bekijken.
 
Een paar tips.
Begin niet met details maar maak eerst een globale hoofdfunctie.
Vanuit de hoofdfunctie (hier "StartTaak") ga je andere functies aanroepen waarin details staan.
Zet de } op een eigen regel om de leesbaarheid te verbeteren.
Gebruik wat meer spaties om de leesbaarheid te verbeteren.

De functie "BerekenFaculteit " mag je zelf maken :D
Code: 
// gebruik een hoofdfunctie waarin je nog niet nadenkt over details
function StartTaak (event) {
    // stop de standaard werking van het laatste event
    // in dit geval het click event van de button
    event.preventDefault();
    // gebruik niet te veel variabelen zodat het geen uitgebreide rijsttafel wordt
    // declareer wel alvast variabele(n) waarvan je de waarde (nog) niet weet
    var invoer = document.querySelector('#getal');
    var getal  = parseInt(invoer.value);
    var resultaat;
    var bericht = "De faculteit is ";
    var uitvoer = document.querySelector('#output');
    // roep functie 'IsEenGetal' om getal te valideren
    if ( IsEenGetal(getal) ) {
        // negatief getal mag niet
        if (getal < 0) {
            alert('Gelieve geen negatief getal in te voeren');
        } else {
            // roep functie 'BerekenFaculteit' voor resultaat faculteit
            resultaat = BerekenFaculteit(getal);
            // zet resultaat op scherm
            uitvoer.innerHTML = bericht + resultaat;
        }
    } else {
        // ongeldige waarde ingevoerd
        alert('Gelieve een positief getal in te voeren');
    }
}

// is Waarde een getal
function IsEenGetal (waarde) {
    if (isNaN(waarde)) {
        return false;
    } else {
        return true;
    }
}

// Bereken faculteit
function BerekenFaculteit (getal) {
    if (getal == 0) {
        return 1;
    } else {
        // bereken hier de faculteit van 'getal'
    }
}

// Ga naar hoofdfunctie 'StartTaak' als op de knop wordt geklikt
var knop = document.getElementById('deKnop');
knop.addEventListener("click", StartTaak);
 
Laatst bewerkt:
Oja nog een tip. Keep it simple :)
Dit werkt ook maar haal zulke dingen uit als je goed thuis bent in booleans.
Code: 
function IsEenGetal (waarde) {
    return !isNaN(waarde);
}

Jouw code heb ik niet getest, alleen wat info bijgezet waarmee je verder kan
Code: 
window.onload = function (){
    var nGetal = document.getElementById('getal');
    var eGetal=getal;
    var nFac = nGetal;
    var nFac = parseInt(nGetal.value);
    var sBericht="De faculteit is ";
    var eKnop = document.querySelector('#deKnop');

    eKnop.onclick = evalueer;

    function evalueer(){
        var nGetal = parseInt(document.getElementById('getal').value);
        // *** isNaN van welk getal? isNaN geeft true/false. Bij vergelijken gebruik je ==
        if(isNaN=0) {
             alert('Gelieve een waarde in te voeren');
        }
        // *** functie staat IN andere functie. Functie wordt nergens gebruikt
        function isNumeric(nGetal) {
              return !isNaN(parseFloat(nGetal)) && isFinite(nGetal);
        }
        nFac = document.getElementById('getal');
        // *** je kan de waarde opvragen met nFac.value
        while(nGetal > 2){
            nGetal -= 1;
            nFac *= nGetal;
        }
        // *** in welke variabele stop je dit
        document.getElementById('getal');
        var eOutput = document.querySelector('#output');
        eOutput.innerHTML = sBericht + nFac;
        console.log(sBericht + nFac);
    }
}

Haal even een " weg in deze regel. Dit is de juiste notatie:
Code: 
<meta http-equiv="content-type" content="text/html; charset=utf-8">
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan