简体   繁体   English

我的清除所有输入字段的按钮不起作用

[英]My Button to clear all input fields wont work

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>

In document.getElementById you forgot to add `` to the MullkompressenAmount id.document.getElementById中,您忘记将 `` 添加到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>

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>

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')您需要将您的 id 用引号括起来(' 或 "),但您使用 " 作为外引号,因此您需要将您的 id 用单引号 (') 括起来,例如('MullkompressenAmount')

To reset the all input fields, please use <input type="reset" /> which you can trigger on form using JS as well.要重置所有输入字段,请使用<input type="reset" /> ,您也可以使用 JS 在表单上触发。 Please visit MDN for reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset请访问 MDN 以供参考: 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" />编辑请使用表单标签来使用<input type="reset" />

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如果你想限制你可以使用 not 功能

 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>

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.您可以通过使用 1) 数据属性来存储价格(而不是为它们使用单​​独的变量)和 2) 类属性来定位输入而不是单独的 id,从而大大简化您的代码。 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附加文件

You have to wrap your tag Id into ''.您必须将标签 ID包装到“”中。 Try the below code for the reset button.试试下面的重置按钮代码。

<button
  onclick="document.getElementById('MullkompressenAmount').value = ''"
>
  Löschen
</button>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM