i made a list where u can input the amount of a product u want to buy and it cauculates the price for. I am trying to make a button that clears all input fields when pressed i dont want the input fields to be cleared when cauculated only when the delete button is pressed. I tried testing it for one button but i cant get it to work can anyone help?
<!DOCTYPE html>
<html>
<head>
</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="RasierschaumAmount"></td>
</tr>
<tr>
<td>Einwegrasierer</td>
<td><input id="EinwegrasiererAmount"></td>
</tr>
<tr>
<td>Zahnreinigunsbecher</td>
<td><input id="ZahnreinigunsBecherAmount"></td>
</tr>
<tr>
<td>Mullkompressen</td>
<td><input id="MullkompressenAmount"></td>
</tr>
<tr>
<td><b>Gesamtpreis</b></td>
<td><p id="Sum"></p></td>
</tr>
</table>
<button onclick="Calculate()">Rechnen</button>
<button onclick="document.getElementById(MullkompressenAmount).value = ''">Löschen</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.40;
var Einwegrasierer = 2;
var ZahnreinigunsBecher = 5;
var Mullkompressen = 6;
let Sum;
let WaschlotionAmount;
let HaarshampooAmount;
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 ZahnreinigunsBecherAmount;
let MullkompressenAmount;
function Calculate() {
if (Sum != 0) {
Sum = 0;
}
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;
let ZahnreinigunsBecherAmount = document.getElementById("ZahnreinigunsBecherAmount").value;
let MullkompressenAmount = document.getElementById("MullkompressenAmount").value;
Sum = (Waschlotion * WaschlotionAmount) + (Haarshampoo * HaarshampooAmount) + (Bodylotion * BodylotionAmount) +
(Wundschutzcreme * WundschutzcremeAmount) + (Deospray * DeosprayAmount) + (Zahncreme * ZahncremeAmount) +
(Zahnbuerste * ZahnbuersteAmount) + (Zahnspuellbecher * ZahnspuellbecherAmount) + (Zahnhaftcreme * ZahnhaftcremeAmount) +
(Zahnreinigunstabs * ZahnreinigunstabsAmount) + (Rasierklingen * RasierklingenAmount) + (RasiererMitKlingen * RasiererMitKlingenAmount) +
(Rasierschaum * RasierschaumAmount) + (Einwegrasierer * EinwegrasiererAmount) + (ZahnreinigunsBecher * ZahnreinigunsBecherAmount) + (Mullkompressen * MullkompressenAmount);
document.getElementById("Sum").innerHTML = Sum;
}
</script>
</html>>Solution :
You have to wrap your tag Id into ”.
Try the below code for the reset button.
<button
onclick="document.getElementById('MullkompressenAmount').value = ''"
>
Löschen
</button>