I am trying to make a list where u can put in the amount of product u want and press a button and the Sum of all the products will be calculated, i am having trouble with the function to get the ammount for each product. I always get the error message when trying the button: Uncaught TypeError: document.getElementById(...) is null
<!DOCTYPE html>
<html>
<head>
<script>
let WaschlotionAmount;
let HaarshampooAmont;
let BodylotionAmount;
let WundschutzcremeAmount;
let DeosprayAmount;
let ZahncremeAmount;
let ZahnbuersteAmount;
let ZahnspuellbecherAmount;
let ZahnhaftcremeAmount;
let ZahnreinigunstabsAmount;
let RasierklingenAmount;
let RasiererMitKlingenAmount;
let RasierschaumAmount;
let EinwegrasiererAmount;
let Sum;
</script>
</head>
<body>
<table>
<tr>
<th>Kosmetikartikel</th>
<th>Menge</th>
</tr>
<tr>
<td>Waschlotion</td>
<td><input id="WaschlotionAmount"></td>
</tr>
<tr>
<td>Haarshampoo</td>
<td><input id="HaarshampooAmount"></td>
</tr>
<tr>
<td>Bodylotion</td>
<td><input id="BodylotionAmount"></td>
</tr>
<tr>
<td>Wundschutzcreme</td>
<td><input id="WundschutzcremeAmount"></td>
</tr>
<tr>
<td>Deospray</td>
<td><input id="DeosprayAmount"></td>
</tr>
<tr>
<td>Zahncreme</td>
<td><input id="ZahncremeAmount"></td>
</tr>
<tr>
<td>Zahnbürste</td>
<td><input id="ZahnbuersteAmount"></td>
</tr>
<tr>
<td>Zahnspüllbecher</td>
<td><input id="ZahnspuellbecherAmount"></td>
</tr>
<tr>
<td>Zahnhaftcreme</td>
<td><input id="ZahnhaftcremeAmount"></td>
</tr>
<tr>
<td>Zahnreinigunstabs</td>
<td><input id="ZahnreinigunstabsAmount"></td>
</tr>
<tr>
<td>Rasierklingen</td>
<td><input id="RasierklingenAmount"></td>
</tr>
<tr>
<td>Rasierer mit Klingen</td>
<td><input id="RasiererMitKlingenAmount"></td>
</tr>
<tr>
<td>Rasierschaum</td>
<td><input id="Rasierschaum"></td>
</tr>
<tr>
<td>Einwegrasierer</td>
<td><input id="EinwegrasiererAmount"></td>
</tr>
<tr>
<td><b>Gesamtpreis</b></td>
<td><p id="Sum"></p></td>
</tr>
</table>
<button onclick="SetAmount()">Try me</button>
</body>
<script>
var Waschlotion = 1.30;
var Haarshampoo = 1.50;
var Bodylotion = 3;
var Wundschutzcreme = 4.80;
var Deospray = 1.80;
var Zahncreme = 3.20;
var Zahnbuerste = 1;
var Zahnspuellbecher = 1.25;
var Zahnhaftcreme = 1.50;
var Zahnreinigunstabs = 3.20;
var Rasierklingen = 2.49;
var RasiererMitKlingen = 4.50;
var Rasierschaum = 1.20;
var Einwegrasierer = 2.40;
function SetAmount() {
let WaschlotionAmount = document.getElementById("WaschlotionAmount").value;
let HaarshampooAmount = document.getElementById("HaarshampooAmount").value;
let BodylotionAmount = document.getElementById("BodylotionAmount").value;
let WundschutzcremeAmount = document.getElementById("WundschutzcremeAmount").value;
let DeosprayAmount = document.getElementById("DeosprayAmount").value;
let ZahncremeAmount = document.getElementById("ZahncremeAmount").value;
let ZahnbuersteAmount = document.getElementById("ZahnbuersteAmount").value;
let ZahnspuellbecherAmount = document.getElementById("ZahnspuellbecherAmount").value;
let ZahnhaftcremeAmount = document.getElementById("ZahnhaftcremeAmount").value;
let ZahnreinigunstabsAmount = document.getElementById("ZahnreinigunstabsAmount").value;
let RasierklingenAmount = document.getElementById("RasierklingenAmount").value;
let RasiererMitKlingenAmount = document.getElementById("RasiererMitKlingenAmount").value;
let RasierschaumAmount = document.getElementById("RasierschaumAmount").value;
let EinwegrasiererAmount = document.getElementById("EinwegrasiererAmount").value;
}
function Calculate() {
document.getElementById("Sum").innerHTML = Sum;
}
</script>
</html>CodePudding user response：
Do not re-declare variable in SetAmount with let. It shadows the global variable.
Also, you declared your variables twice - once at beginning with let, once in the middle with var.
CodePudding user response：
Change id of Rasierschaum to RasierschaumAmount. It will work!
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Kosmetikartikel</th>
<th>Menge</th>
</tr>
<tr>
<td>Waschlotion</td>
<td><input id="WaschlotionAmount"></td>
</tr>
<tr>
<td>Haarshampoo</td>
<td><input id="HaarshampooAmount"></td>
</tr>
<tr>
<td>Bodylotion</td>
<td><input id="BodylotionAmount"></td>
</tr>
<tr>
<td>Wundschutzcreme</td>
<td><input id="WundschutzcremeAmount"></td>
</tr>
<tr>
<td>Deospray</td>
<td><input id="DeosprayAmount"></td>
</tr>
<tr>
<td>Zahncreme</td>
<td><input id="ZahncremeAmount"></td>
</tr>
<tr>
<td>Zahnbürste</td>
<td><input id="ZahnbuersteAmount"></td>
</tr>
<tr>
<td>Zahnspüllbecher</td>
<td><input id="ZahnspuellbecherAmount"></td>
</tr>
<tr>
<td>Zahnhaftcreme</td>
<td><input id="ZahnhaftcremeAmount"></td>
</tr>
<tr>
<td>Zahnreinigunstabs</td>
<td><input id="ZahnreinigunstabsAmount"></td>
</tr>
<tr>
<td>Rasierklingen</td>
<td><input id="RasierklingenAmount"></td>
</tr>
<tr>
<td>Rasierer mit Klingen</td>
<td><input id="RasiererMitKlingenAmount"></td>
</tr>
<tr>
<td>Rasierschaum</td>
<td><input id="RasierschaumAmount"></td>
</tr>
<tr>
<td>Einwegrasierer</td>
<td><input id="EinwegrasiererAmount"></td>
</tr>
<tr>
<td><b>Gesamtpreis</b></td>
<td><p id="Sum"></p></td>
</tr>
</table>
<button onclick="SetAmount()">Try me</button>
</body>
<script>
let Waschlotion = 1.30;
let Haarshampoo = 1.50;
let Bodylotion = 3;
let Wundschutzcreme = 4.80;
let Deospray = 1.80;
let Zahncreme = 3.20;
let Zahnbuerste = 1;
let Zahnspuellbecher = 1.25;
let Zahnhaftcreme = 1.50;
let Zahnreinigunstabs = 3.20;
let Rasierklingen = 2.49;
let RasiererMitKlingen = 4.50;
let Rasierschaum = 1.20;
let Einwegrasierer = 2.40;
function SetAmount() {
let WaschlotionAmount = document.getElementById("WaschlotionAmount").value;
let HaarshampooAmount = document.getElementById("HaarshampooAmount").value;
let BodylotionAmount = document.getElementById("BodylotionAmount").value;
let WundschutzcremeAmount = document.getElementById("WundschutzcremeAmount").value;
let DeosprayAmount = document.getElementById("DeosprayAmount").value;
let ZahncremeAmount = document.getElementById("ZahncremeAmount").value;
let ZahnbuersteAmount = document.getElementById("ZahnbuersteAmount").value;
let ZahnspuellbecherAmount = document.getElementById("ZahnspuellbecherAmount").value;
let ZahnhaftcremeAmount = document.getElementById("ZahnhaftcremeAmount").value;
let ZahnreinigunstabsAmount = document.getElementById("ZahnreinigunstabsAmount").value;
let RasierklingenAmount = document.getElementById("RasierklingenAmount").value;
let RasiererMitKlingenAmount = document.getElementById("RasiererMitKlingenAmount").value;
let RasierschaumAmount = document.getElementById("RasierschaumAmount").value;
let EinwegrasiererAmount = document.getElementById("EinwegrasiererAmount").value;
}
function Calculate() {
document.getElementById("Sum").innerHTML = Sum;
}
</script>
</html>
CodePudding user response：
function SetAmount() {
WaschlotionAmount = document.getElementById("WaschlotionAmount").value;
HaarshampooAmount = document.getElementById("HaarshampooAmount").value;
BodylotionAmount = document.getElementById("BodylotionAmount").value;
WundschutzcremeAmount = document.getElementById("WundschutzcremeAmount").value;
DeosprayAmount = document.getElementById("DeosprayAmount").value;
ZahncremeAmount = document.getElementById("ZahncremeAmount").value;
ZahnbuersteAmount = document.getElementById("ZahnbuersteAmount").value;
ZahnspuellbecherAmount = document.getElementById("ZahnspuellbecherAmount").value;
ZahnhaftcremeAmount = document.getElementById("ZahnhaftcremeAmount").value;
ZahnreinigunstabsAmount = document.getElementById("ZahnreinigunstabsAmount").value;
RasierklingenAmount = document.getElementById("RasierklingenAmount").value;
RasiererMitKlingenAmount = document.getElementById("RasiererMitKlingenAmount").value;
RasierschaumAmount = document.getElementById("RasierschaumAmount").value;
EinwegrasiererAmount = document.getElementById("EinwegrasiererAmount").value;
}in you function you create again a variable which is only available in that function