我的清除所有輸入字段的按鈕不起作用
[英]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.