Javascript JS和HTML之间的未捕获引用错误
我正忙着编写下面的代码，但不理解错误消息。光盘是否指向HTML中的正确位置 它是关于Javascript JS和HTML之间的未捕获引用错误,javascript,html,reference,Javascript,Html,Reference,我正忙着编写下面的代码，但不理解错误消息。光盘是否指向HTML中的正确位置 它是关于disc.innerHTML=sumDiscount它说光盘没有定义，尽管它是在HTML中定义的，因为它是引用它的 <html> <head><title>Oefenen</title></head> <!--in de HTML zet je alles wat met opmaak van je HTML pagina te maken hee
disc.innerHTML=sumDiscount它说光盘没有定义，尽管它是在HTML中定义的，因为它是引用它的
<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>
奥芬南
De prijs van een bakje kibbeling（300克）是免费的
德普里伊斯·范恩·维斯克罗基特是€。
在这座城市里，我们可以看到一个叫bakjes kibbeling的城市：
在这座城市里，我们将看到：
安塔尔·巴克斯·基伯林：
安塔尔维斯科耶斯：
Prijs kibbeling:
Prijs viskoekje:
科廷：
Totaalprijs：
var artikelen=[
[“Kibbeling”，6.00]，
[“Viskoekje”，1.25]
];
labelKibbelingPrijs.innerHTML=（artikelen[0][1]）toFixed（2）//zie labelKibbelingPrijs在他的HTML文档中。佐尔格特·沃尔特·德普里斯·范·伊恩·巴基·基伯林·韦尔格芬。这是硬编码的。这是一个很好的例子
labelViskroketPrijs.innerHTML=（artikelen[1][1]）toFixed（2）//zie labelViskroketPrijs在他的HTML文档中。我的朋友们都很高兴见到你。这是硬编码的。这是一个很好的例子
函数berekening（）{
var aantalKibbeling、aantalViskoekjes、subPrijsKibbeling、subPrijsViskoekje、totaalPrijs；
var kortingKibbeling、kortingViskoekje、sum、Sumpless；
var aantallenArray=[]；//索引0是voor het aantal kibbeling，索引1是voor het aantal viskoekjes
aantalKibbeling=document.getElementById（“inverveldaantalkibbeling”）.value；//haalt het aantalkibeld bakjes op uit het inverveld.JavaScript weet aan de hand van het id van het involveld（inverveldaantalkibbeling）dar het aantalkibeld bakjes kibbeling statat。
aantalViskoekjes=document.getElementById（“inverveldaantalviskoekjes”）.value；//haalt-het-aantal-viskoekjes-op-uit-het-invorveld.JavaScript-weet-an-an-de-hand-van-het-invorveld（invorveldaantalviskoekjes）dar-het-aantal-viskoekjes-stat。
label1.innerHTML=aantalKibbeling；//我们通过id label1为gegeven.Hier zet和de waarde van aantalKibbeling添加了一个单词gegeven和HTML。
label2.innerHTML=aantalViskoekjes；//我们将通过id label2在HTML中标记2 gegeven.Hier zet je和de waarde van aantalViskoekjes。
aantallenArray.push（aantalKibbeling）；
安塔利纳雷推（安塔尔维斯科耶斯）；
次级基伯林=（安塔尔基伯林*阿蒂克伦[0][1]）固定（2）；
次级抵押贷款=（aantalViskoekjes*artikelen[1][1]）固定（2）；
prijsKibbeling.innerHTML=subPrijsKibbeling；
prijsViskoekje.innerHTML=子优先级viskoekje；
kortingKibbeling=（aantallenArray[0]/3-（aantallenArray[0]/3）%1）；
kortingViskoekje=（安塔莱纳雷[1]/3-（安塔莱纳雷[1]/3）%1）；
Sumplexing=（kortingKibbeling+kortingViskoekje）*3*0.08；
disc.innerHTML=sumpless；
总和=次级抵押贷款+次级抵押贷款；
控制台日志（总和）；
totaalPrijs=（总和折扣）。toFixed（2）；//de prijs van elk artikel wordt 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我们通过id label3标记3 gegegeven.Hier zet je de waarde van totaalPrijs Dat terug wordt gegegeven aan de HTML。
}
在您查询HTML元素之前，JavaScript对它们一无所知
//按id查找元素
const disc=document.getElementById（'disc'）；
disc.innerHTML=sumpless；
正如xdumaine所说，您应该首先使用document.getElementById（）方法来选择DOM元素，然后使用innerHTML来处理该变量
基于纯粹的运气，它适用于label1和label2，因为某些浏览器基本上都在尝试智能化。您可以阅读更多信息，这里有一些链接：
Hm，仍然不起作用，因为uncaughttypeerror:无法将属性'innerHTML'设置为null
，但是：为什么label1和label2的性能优于？上面的解决方案仍然不起作用。但我发现有一个代替了。现在它工作了！