JS清空所有输入字段按钮功能失效问题求解

问题说明 #

开发的美妆个护商品选购计价页，核心需求：

• 用户输入各商品购买数量后，点击计算按钮自动核算总价
• 仅点击清空按钮时清空所有输入内容，计算操作不得修改已输入的数量
  当前测试单个输入框清空逻辑时功能完全不生效。

故障原因 #

• 清空按钮的内联JS语法错误：document.getElementById(MullkompressenAmount) 中传入的id没有加字符串引号，浏览器会把MullkompressenAmount当成未定义的JS变量解析，直接抛出JS错误，导致清空逻辑不执行
• 现有清空逻辑仅针对单个输入框编写，未实现全量字段清空，且未同步重置总价显示
• 原Calculate函数仅读取输入框值做计算，没有修改输入框value的逻辑，本身已经满足「计算时保留输入内容」的要求，不需要额外调整

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
  <table border="1" cellpadding="8" cellspacing="0">
    <tr>
      <th>Kosmetikartikel（美妆个护商品）</th>
      <th>Menge（购买数量）</th>
    </tr>
    <tr>
      <td>Waschlotion 沐浴露</td>
      <td><input id="WaschlotionAmount" type="number" min="0"></td>
    </tr>
    <tr>
      <td>Haarshampoo 洗发水</td>
      <td><input id="HaarshampooAmount" type="number" min="0"></td>
    </tr>
    <tr>
      <td>Bodylotion 身体乳</td>
      <td><input id="BodylotionAmount" type="number" min="0"></td>
    </tr>
    <tr>
      <td>Wundschutzcreme 护臀膏</td>
      <td><input id="WundschutzcremeAmount" type="number" min="0"></td>
    </tr>
    <tr>
      <td>Deospray 止汗喷雾</td>
     <td><input id="DeosprayAmount" type="number" min="0"></td>
   </tr>
   <tr>
    <td>Zahncreme 牙膏</td>
    <td><input id="ZahncremeAmount" type="number" min="0"></td>
  </tr>
  <tr>
   <td>Zahnbürste 牙刷</td>
   <td><input id="ZahnbuersteAmount" type="number" min="0"></td>
 </tr>
 <tr>
  <td>Zahnspüllbecher 漱口杯</td>
  <td><input id="ZahnspuellbecherAmount" type="number" min="0"></td>
</tr>
   <tr>
    <td>Zahnhaftcreme 义齿黏着膏</td>
    <td><input id="ZahnhaftcremeAmount" type="number" min="0"></td>
  </tr>
  <tr>
    <td>Zahnreinigunstabs 假牙清洁片</td>
    <td><input id="ZahnreinigunstabsAmount" type="number" min="0"></td>
  </tr>
  <tr>
    <td>Rasierklingen 剃须刀片</td>
    <td><input id="RasierklingenAmount" type="number" min="0"></td>
  </tr>
  <tr>
    <td>Rasierer mit Klingen 带刀架剃须刀</td>
    <td><input id="RasiererMitKlingenAmount" type="number" min="0"></td>
  </tr>
  <tr>
    <td>Rasierschaum 剃须泡沫</td>
    <td><input id="RasierschaumAmount" type="number" min="0"></td>
  </tr>
  <tr>
    <td>Einwegrasierer 一次性剃须刀</td>
    <td><input id="EinwegrasiererAmount" type="number" min="0"></td>
  </tr>
  <tr>
    <td>Zahnreinigunsbecher 洁牙杯</td>
    <td><input id="ZahnreinigunsBecherAmount" type="number" min="0"></td>
  </tr>
  <tr>
    <td>Mullkompressen 医用纱布</td>
    <td><input id="MullkompressenAmount" type="number" min="0"></td>
  </tr>
  <tr>
    <td><b>Gesamtpreis 总价</b></td>
    <td><p id="Sum">0</p></td>
  </tr>
</table>
<br>
<button onclick="Calculate()">Rechnen 计算总价</button>
<button onclick="ClearAll()">Löschen 清空所有</button>
</body>
<script>
// 商品单价配置
const priceMap = {
  Waschlotion: 1.30,
  Haarshampoo: 1.50,
  Bodylotion: 3,
  Wundschutzcreme: 4.80,
  Deospray: 1.80,
  Zahncreme: 3.20,
  Zahnbuerste: 1,
  Zahnspuellbecher: 1.25,
  Zahnhaftcreme: 1.50,
  Zahnreinigunstabs: 3.20,
  Rasierklingen: 2.49,
  RasiererMitKlingen: 4.50,
  Rasierschaum: 1.40,
  Einwegrasierer: 2,
  ZahnreinigunsBecher: 5,
  Mullkompressen: 6
}

// 计算总价：仅读取输入值，不修改输入框内容，天然满足保留输入的要求
function Calculate() {
  let total = 0;
  // 遍历所有商品计算总价，空输入按0计算
  for (const goodsKey in priceMap) {
    const inputEl = document.getElementById(`${goodsKey}Amount`);
    const buyNum = Number(inputEl.value) || 0;
    total += priceMap[goodsKey] * buyNum;
  }
  // 总价保留两位小数显示
  document.getElementById("Sum").textContent = total.toFixed(2);
}

// 清空所有输入+重置总价
function ClearAll() {
  for (const goodsKey in priceMap) {
    const inputEl = document.getElementById(`${goodsKey}Amount`);
    inputEl.value = '';
  }
  document.getElementById("Sum").textContent = '0';
}
</script>
</html>

优化点说明 #

• 给输入框加了type="number" min="0"属性，从交互层面避免用户输入非数字、负数的无效值
• 把重复的单价、DOM获取逻辑改成遍历配置的写法，减少冗余代码，后续新增商品只需要在priceMap里加配置即可
• 总价计算后保留两位小数，符合金额显示规范
• 清空函数同步重置总价显示，避免清空输入后旧总价还留在页面上

内容的提问来源于stack exchange，提问作者EazyP