我的清除所有输入字段的按钮不起作用
[英]My Button to clear all input fields wont work
问题描述
我做了一个清单，你可以在其中输入你想购买的产品的数量，然后计算价格。 我正在尝试制作一个在按下时清除所有输入字段的按钮，我不希望仅在按下删除按钮时才清除输入字段。 我试过用一个按钮测试它，但我无法让它工作，有人能帮忙吗？
<!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 个解决方案
解决方案1
1 2022-07-06 08:37:58
在document.getElementById中，您忘记将 `` 添加到MullkompressenAmount id。
固定的：
<!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>
解决方案2
1 2022-07-06 08:39:14
尝试将您的输入值设置为空。
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>
解决方案3
1 2022-07-06 08:41:05
重置值时出现拼写错误。 您需要将您的 id 用引号括起来（' 或 "），但您使用 " 作为外引号，因此您需要将您的 id 用单引号 (') 括起来，例如('MullkompressenAmount')
要重置所有输入字段，请使用<input type="reset" /> ，您也可以使用 JS 在表单上触发。 请访问 MDN 以供参考： https ://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
<button onclick="document.getElementById('MullkompressenAmount').value = ''">Löschen</button>
编辑：请使用表单标签来使用<input type="reset" />
解决方案4
1 2022-07-06 08:46:52
如果要重置表单中所有输入的值，可以使用它。 如果你想限制你可以使用 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>
解决方案5
1 2022-07-06 09:21:12
您可以通过使用 1） 数据属性来存储价格（而不是为它们使用单独的变量）和 2） 类属性来定位输入而不是单独的 id，从而大大简化您的代码。 然后，您可以使用循环执行简单的计算，并在单击“删除”按钮时使用相同的技术清空所有输入。
// 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>
附加文件
解决方案6
0 已采纳 2022-07-06 08:36:29
您必须将标签 ID包装到“”中。 试试下面的重置按钮代码。
<button
onclick="document.getElementById('MullkompressenAmount').value = ''"
>
Löschen
</button>
单击数据关闭按钮时如何清除引导模式中的所有输入字段？
[英]How to clear all input fields in bootstrap modal when clicking data-dismiss button?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.