CODEWITHSUNDEEP
javascripthtmlreference
drs. Ekingen
drs. Ekingen

Reputation: 3

Uncaught reference error between JS and HTML

I am busy with the code below I have produced but do not understand the error message. disc is refering to the right spot in the HTML?

It is about disc.innerHTML = sumDiscount; It says that disc is not defined although it is defined in the HTML as it is refering to it?

<html>
<head><title>Oefenen</title></head>
<!--in de HTML zet je alles wat met opmaak van je HTML pagina te maken heeft. Denk aan de achtergrondkleur,
het stylen van tekst. Ook zet je er de knopjes en tekstvakken neer -->
<body style = "background-color:powderblue;"> <!--achtergrondkleur-->
De prijs van een <u>bakje kibbeling</u> (<b>300 gram</b>) is € <span id = "labelKibbelingPrijs"></span> met gratis saus. <br>
De prijs van een <u>viskroket</u> is € <span id = "labelViskroketPrijs"></span>.<br><br>
Voer het aantal bakjes kibbeling in dat je wilt: <input type = "number" min = "0" id = "invoerveldAantalKibbeling"> <br>
Voer het aantal viskoekjes in dat je wilt: <input type = "number" min = "0" id = "invoerveldAantalViskoekjes">

<input type = "button" id = "btn1" value = "Bereken prijs" onclick = "berekening()">

<hr>
<!--Hier heb ik tekst en labels (label1, label2) aangemaakt. Omdat ik het aantal bakjes kibbeling en de totaalprijs wil laten zien
als er op de knop wordt gedrukt moet ik JavaScript vertellen waar hij dat moet neerzetten (het berekenen gebeurt in de
JavaScript functie berekening. label1 en label2 zijn id's waardoor JavaScript met HTML kan praten en omgekeerd-->
Aantal bakjes kibbeling: <span id = "label1"></span> <br>
Aantal viskoekjes: <span id = "label2"></span><br><br><br>

Prijs kibbeling: <span id = "prijsKibbeling"></span><br>
Prijs viskoekje: <span id = "prijsViskoekje"><span><br><br><br>

Korting: <span id = "disc"></span><br><br>

<hr>
Totaalprijs: <span id = "label3"></span>

</body>
<script>
var artikelen = [
        ["Kibbeling", 6.00],
        ["Viskoekje", 1.25]
    ];

labelKibbelingPrijs.innerHTML = (artikelen[0][1]).toFixed(2); //zie labelKibbelingPrijs in het HTML deel. Zorgt er voor dat daar de prijs van een bakje kibbeling wordt weergegeven. Dan hoef je dat niet hard coded te doen. Bij een prijswijziging hoef je de prijs alleen in de array aan te passen
labelViskroketPrijs.innerHTML = (artikelen[1][1]).toFixed(2); //zie labelViskroketPrijs in het HTML deel. Zorgt er voor dat daar de prijs van een viskroket wordt weergegeven. Dan hoef je dat niet hard coded te doen. Bij een prijswijziging hoef je de prijs alleen in de array aan te passen

function berekening() {
    var aantalKibbeling, aantalViskoekjes, subPrijsKibbeling, subPrijsViskoekje, totaalPrijs;
    var kortingKibbeling, kortingViskoekje, sum, sumDiscount;
    var aantallenArray = []; //index 0 is voor het aantal kibbeling, index 1 is voor het aantal viskoekjes
            
    aantalKibbeling = document.getElementById("invoerveldAantalKibbeling").value; //haalt het aantal bakjes op uit het invoerveld. JavaScript weet aan de hand van het id van het invoerveld (invoerveldAantalKibbeling) dat daar het aantal bakjes kibbeling staat.
    aantalViskoekjes = document.getElementById("invoerveldAantalViskoekjes").value; //haalt het aantal viskoekjes op uit het invoerveld. JavaScript weet aan de hand van het id van het invoerveld (invoerveldAantalViskoekjes) dat daar het aantal viskoekjes staat.
    
    label1.innerHTML = aantalKibbeling; //het aantal bakjes kibbeling moet op het scherm komen. Dat hadden we label1 gegeven. Hier zet je dan de waarde van aantalKibbeling dat terug wordt gegeven aan HTML via id label1.
    label2.innerHTML = aantalViskoekjes; //het aantal viskoekjes moet op het scherm komen. Dat hadden we label2 gegeven. Hier zet je dan de waarde van aantalViskoekjes dat terug wordt gegeven aan HTML via id label2.

    aantallenArray.push(aantalKibbeling);
    aantallenArray.push(aantalViskoekjes);

    subPrijsKibbeling = (aantalKibbeling * artikelen[0][1]).toFixed(2);
    subPrijsViskoekje = (aantalViskoekjes * artikelen[1][1]).toFixed(2);
    
    prijsKibbeling.innerHTML = subPrijsKibbeling;
    prijsViskoekje.innerHTML = subPrijsViskoekje;   
    
    kortingKibbeling = (aantallenArray[0]/3 - (aantallenArray[0]/3)%1);
    kortingViskoekje = (aantallenArray[1]/3 - (aantallenArray[1]/3)%1);
        
    sumDiscount = (kortingKibbeling + kortingViskoekje) * 3 * 0.08;
    
    disc.innerHTML = sumDiscount; 

    sum = subPrijsKibbeling + subPrijsViskoekje;
    console.log(sum);

    totaalPrijs = (sum - sumDiscount).toFixed(2); //de prijs van elk artikel wordt uit de array gehaald. Kijk goed naar de coordinaten zodat je weet welke prijs je wilt hebben (de eerste rij heeft index 0, de eerste kolom heeft index 0)
    console.log(totaalPrijs);

    label3.innerHTML = "€ " + totaalPrijs; //de totaalprijs moet op het scherm komen. Dat hadden we label3 gegeven. Hier zet je de waarde van totaalPrijs dat terug wordt gegeven aan de HTML via id label3.
}
</script>
</html>

Upvotes: 0

Views: 46

Answers (2)

Costa
Costa

Reputation: 2964

Like xdumaine said you should use the document.getElementById() method to select the DOM element first, and then use innerHTML to that variable.

It works for label1 and label2 based of pure luck, because certain browsers are trying to be smart basically. You can read more about this, here are some links:

JavaScript undefined variables are auto-defined?

Is there a spec that the id of elements should be made global variable?

Upvotes: 0

xdumaine
xdumaine

Reputation: 10349

JavaScript has no knowledge of HTML elements until you query for them.

// find the element by id
const disc = document.getElementById('disc');
disc.innerHTML = sumDiscount;

Upvotes: 1

Related Questions