按商品数量自动计价列表无法获取输入值报getElementById空错误

直接触发Uncaught TypeError: document.getElementById(...) is null的原因是元素ID不匹配：

• Rasierschaum（剃须泡沫）对应的输入框写的id是Rasierschaum，但JS获取元素时传入的id是RasierschaumAmount，getElementById找不到对应元素就返回null，访问null的value属性直接抛错。

除此之外代码还有几个逻辑问题会导致功能无法正常运行：

• 头部全局声明变量时存在拼写错误：HaarshampooAmont漏写字母u，和后续使用的变量名不匹配
• SetAmount函数内重复用let声明和全局同名的变量，导致获取到的值仅存在于函数局部作用域，后续计算逻辑无法读取
• 输入框获取到的value默认是字符串类型，直接做加法运算会触发字符串拼接，不会得到正确的数值总价
• 原代码仅写了获取值的逻辑，没有实现总价计算、结果渲染的完整流程，就算不报错也无法输出计价结果
• 没有对空输入做兼容处理，用户留空输入框时会得到NaN的计算结果

<!DOCTYPE html>
<html>
<head>
<script>
// 全局变量统一声明，修正拼写错误
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 Sum;
</script>
</head>
<body>
  <table>
    <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>
    <!-- 修正ID不匹配问题 -->
    <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><b>Gesamtpreis</b></td>
    <td><p id="Sum"></p></td>
  </tr>
</table>
<button onclick="SetAmount()">Berechnen</button>
</body>
<script>
// 商品单价统一配置
const price = {
  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.20,
  Einwegrasierer: 2.40
}

function SetAmount() {
  // 获取输入值，统一转数值，空值默认按0计算
  WaschlotionAmount = Number(document.getElementById("WaschlotionAmount").value) || 0;
  HaarshampooAmount = Number(document.getElementById("HaarshampooAmount").value) || 0;
  BodylotionAmount = Number(document.getElementById("BodylotionAmount").value) || 0;
  WundschutzcremeAmount = Number(document.getElementById("WundschutzcremeAmount").value) || 0;
  DeosprayAmount = Number(document.getElementById("DeosprayAmount").value) || 0;
  ZahncremeAmount = Number(document.getElementById("ZahncremeAmount").value) || 0;
  ZahnbuersteAmount = Number(document.getElementById("ZahnbuersteAmount").value) || 0;
  ZahnspuellbecherAmount = Number(document.getElementById("ZahnspuellbecherAmount").value) || 0;
  ZahnhaftcremeAmount = Number(document.getElementById("ZahnhaftcremeAmount").value) || 0;
  ZahnreinigunstabsAmount = Number(document.getElementById("ZahnreinigunstabsAmount").value) || 0;
  RasierklingenAmount = Number(document.getElementById("RasierklingenAmount").value) || 0;
  RasiererMitKlingenAmount = Number(document.getElementById("RasiererMitKlingenAmount").value) || 0;
  RasierschaumAmount = Number(document.getElementById("RasierschaumAmount").value) || 0;
  EinwegrasiererAmount = Number(document.getElementById("EinwegrasiererAmount").value) || 0;

  // 累加计算总价
  Sum = 
    WaschlotionAmount * price.Waschlotion +
    HaarshampooAmount * price.Haarshampoo +
    BodylotionAmount * price.Bodylotion +
    WundschutzcremeAmount * price.Wundschutzcreme +
    DeosprayAmount * price.Deospray +
    ZahncremeAmount * price.Zahncreme +
    ZahnbuersteAmount * price.Zahnbuerste +
    ZahnspuellbecherAmount * price.Zahnspuellbecher +
    ZahnhaftcremeAmount * price.Zahnhaftcreme +
    ZahnreinigunstabsAmount * price.Zahnreinigunstabs +
    RasierklingenAmount * price.Rasierklingen +
    RasiererMitKlingenAmount * price.RasiererMitKlingen +
    RasierschaumAmount * price.Rasierschaum +
    EinwegrasiererAmount * price.Einwegrasierer;
  
  // 渲染结果，保留两位小数
  document.getElementById("Sum").innerHTML = Sum.toFixed(2) + " €";
}
</script>
</html>

• 所有数量输入框添加type="number" min="0"属性，限制用户只能输入非负数字，减少非法输入
• 移除函数内重复的let变量声明，所有获取到的数量值直接存入全局变量
• 对输入值做Number类型转换，空输入默认按0处理，避免出现NaN计算结果
• 补全总价计算逻辑，计算完成后直接将保留两位小数的金额渲染到页面
• 统一管理商品单价，后续修改价格不需要改动计算逻辑

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