My Button to clear all input fields wont work
Question
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>
6 answers
solution1
1 2022-07-06 08:37:58
In document.getElementById you forgot to add `` to the MullkompressenAmount id.
Fixed:
<!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>
solution2
1 2022-07-06 08:39:14
Try setting your input values to null.
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 = 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; function Calculate() { if (Sum != 0) { Sum = 0; } 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; } function ClearAll(){ console.log("clicked") document.getElementById("WaschlotionAmount").value=""; document.getElementById("HaarshampooAmount").value=""; document.getElementById("BodylotionAmount").value=""; document.getElementById("WundschutzcremeAmount").value=""; document.getElementById("DeosprayAmount").value=""; document.getElementById("ZahncremeAmount").value=""; document.getElementById("ZahnbuersteAmount").value=""; document.getElementById("ZahnspuellbecherAmount").value=""; document.getElementById("ZahnhaftcremeAmount").value=""; document.getElementById("ZahnreinigunstabsAmount").value=""; document.getElementById("RasierklingenAmount").value=""; document.getElementById("RasiererMitKlingenAmount").value=""; document.getElementById("RasierschaumAmount").value=""; document.getElementById("EinwegrasiererAmount").value=""; document.getElementById("MullkompressenAmount").value=""; document.getElementById("ZahnreinigunsBecherAmount").value=""; }
<!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="ClearAll()">Löschen</button> </body> </html>
solution3
1 2022-07-06 08:41:05
You have typo while you are resetting the value. you need to wrap your id in quotes (' or ") but you are using " as outer quotes so you need to wrap your id in single quote (') like ('MullkompressenAmount')
To reset the all input fields, please use <input type="reset" /> which you can trigger on form using JS as well. Please visit MDN for reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
<button onclick="document.getElementById('MullkompressenAmount').value = ''">Löschen</button>
EDIT : Please use form tag to use <input type="reset" />
solution4
1 2022-07-06 08:46:52
If you want to reset the value of all inputs in your form, you can use this. If you want to limit you can use the not function
function Clear() { $('input') .not(':button, :submit, :reset, :hidden') .val('') }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!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="Clear()">Clear</button> </body>
solution5
1 2022-07-06 09:21:12
You can simplify your code a lot by using 1) data attributes to store the prices (instead of having separate variables for them), and 2) class attributes to target the inputs instead of separate ids. You can then perform a simple calculation with a loop , and use the same technique to empty all the inputs when you click the "delete" button.
// Cache the elements const products = document.querySelectorAll('.product'); const calculateBtn = document.querySelector('.calculate'); const deleteBtn = document.querySelector('.delete'); const sum = document.querySelector('.sum'); // Add event listeners to the buttons that call their // corresponding functions calculateBtn.addEventListener('click', handleCalculate); deleteBtn.addEventListener('click', handleDelete); function handleCalculate() { // Initialise a temporary variable to hold the sum // which increases on each iteration of the loop let tempsum = 0; // Loop over the product (input) elements // we cached earlier for (const product of products) { // Get the input value. const value = product.value; // Get the price from the input's dataset const price = product.dataset.price; // Multiply them (coercing them to Numbers first) // and add them to our temporary sum variable tempsum += Number(value) * Number(price); } // Finally add that sum to the sum element sum.textContent = tempsum.toFixed(2); } // `handleDelete` also uses a loop, except on each // iteration it resets each input's value to an empty string, // and then does the same for the sum element function handleDelete() { for (const product of products) { product.value = ''; } sum.textContent = ''; }
table { border-collapse: collapse; border: 1px solid #ababab; margin-bottom: 1em; } .heading { background-color: #787878; color: white; } th, td { padding: 0.3em 0.3em; } .sum { display: inline; } .buttons { margin-top: 1em; } button { display: inline; margin-right: 0.5em; }
<table> <tr class="heading"> <th>Kosmetikartikel</th> <th>Menge</th> </tr> <tr> <td>Waschlotion</td> <td><input class="product" data-price="1.30"></td> </tr> <tr> <td>Haarshampoo</td> <td><input class="product" data-price="1.50"></td> </tr> <tr> <td>Bodylotion</td> <td><input class="product" data-price="3"></td> </tr> <tr> <td>Wundschutzcreme</td> <td><input class="product" data-price="4.80"></td> </tr> <tr> <td>Deospray</td> <td><input class="product" data-price="1.80"></td> </tr> </table> Sum: <div class="sum"></div> <div class="buttons"> <button class="calculate">Rechnen</button> <button class="delete">Löschen</button> </buttons>
Additional documentation
solution6
0 ACCPTED 2022-07-06 08:36:29
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
To disable Clear button while all input fields are null
Clear Input Fields on button click
button to clear all select fields
How to clear all input fields in bootstrap modal when clicking data-dismiss button?
Why my function wont work on clicking button?
Using A Clear-Filed Button To Clear Some Fields In A Form, But Not All
input field doesnt work after clear button
Making All clear button work on a Calculator
How to clear dynamically generated input fields using a button?
Reset(clear) input fields JS/HTML with button “clean”
Related Tags