为化妆品计算器绑定Enter键触发计算的技术实现问题

API 探路者

2026-7-22

化妆品计算器添加Enter键触发计算功能的问题解决

问题概述

已开发完成的化妆品计算器功能正常，但目前仅能通过点击「Rechnen」按钮执行计算，希望新增按Enter键直接触发计算的功能，参考示例代码实现后未生效，相关代码如下。

错误原因分析

事件监听器绑定位置错误：将Enter键的监听逻辑放在了Calculate函数内部，只有点击按钮后才会绑定事件，且每次点击都会重复绑定，不仅逻辑错误还浪费资源。
监听对象错误：把事件绑定在了按钮上，而用户输入时焦点在输入框中，按钮默认不会获得焦点，导致按Enter时事件无法触发。

修正方案

将Enter键的监听逻辑放在全局作用域，页面加载完成后就绑定到document上，这样无论焦点在哪个输入框，按下Enter都能触发计算；同时简化逻辑，直接调用Calculate函数而非模拟按钮点击。

修正后的完整代码

HTML部分

<table class="center">
  <tr>
    <th>Kosmetikartikel</th>
    <th>Menge</th>
  </tr>
  <tr>
    <td>Waschlotion</td>
    <td><input id="WaschlotionAmount"></td>
    <td> 1,30 </td>
  </tr>
  <tr>
    <td>Haarshampoo</td>
    <td><input id="HaarshampooAmount"></td>
    <td>1,50</td>
  </tr>
  <tr>
    <td>Bodylotion</td>
    <td><input id="BodylotionAmount"></td>
    <td>3</td>
  </tr>
  <tr>
    <td>Wundschutzcreme</td>
    <td><input id="WundschutzcremeAmount"></td>
    <td>4,80</td>
  </tr>
  <tr>
    <td>Deospray</td>
    <td><input id="DeosprayAmount"></td>
    <td>1,80</td>
  </tr>
  <tr>
    <td>Zahncreme</td>
    <td><input id="ZahncremeAmount"></td>
    <td>1,50</td>
  </tr>
  <tr>
    <td>Zahnbürste</td>
    <td><input id="ZahnbuersteAmount"></td>
    <td>1</td>
  </tr>
  <tr>
    <td>Zahnspüllbecher</td>
    <td><input id="ZahnspuellbecherAmount"></td>
    <td>1,25</td>
  </tr>
  <tr>
    <td>Zahnhaftcreme</td>
    <td><input id="ZahnhaftcremeAmount"></td>
    <td>3,20</td>
  </tr>
  <tr>
    <td>Zahnreinigunstabs</td>
    <td><input id="ZahnreinigunstabsAmount"></td>
    <td>3,20</td>
  </tr>
  <tr>
    <td>Rasierklingen</td>
    <td><input id="RasierklingenAmount"></td>
    <td>2,49</td>
  </tr>
  <tr>
    <td>Rasierer mit Klingen</td>
    <td><input id="RasiererMitKlingenAmount"></td>
    <td>4.50</td>
  </tr>
  <tr>
    <td>Rasierschaum</td>
    <td><input id="RasierschaumAmount"></td>
    <td>1,40</td>
  </tr>
  <tr>
    <td>Einwegrasierer</td>
    <td><input id="EinwegrasiererAmount"></td>
    <td>2</td>
  </tr>
  <tr>
    <td>Zahnreinigunsbecher</td>
    <td><input id="ZahnreinigunsBecherAmount"></td>
    <td>5</td>
  </tr>
  <tr>
    <td>Mullkompressen</td>
    <td><input id="MullkompressenAmount"></td>
    <td>6</td>
  </tr>
  <tr>
    <td><b>Gesamtpreis</b></td>
    <td><b id="Sum"></b></td>
  </tr>
</table>
<div class="buttons">
  <button id="Rechnen" onclick="Calculate()">Rechnen</button>
  <button id="Clear All" onclick="ClearAll()">Clear All</button>
</div>

CSS部分

td {
  text-align: center;
  font-weight: bold;
}

table {
  text-align: center;
}

.center {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.buttons {
  margin-top: 20px;
  margin-left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

button {
  cursor: pointer;
}

#Rechnen {
  margin-right: 10px;
}

JavaScript部分

var Waschlotion = 1.30;
var Haarshampoo = 1.50;
var Bodylotion = 3;
var Wundschutzcreme = 4.80;
var Deospray = 1.80;
var Zahncreme = 1.50;
var Zahnbuerste = 1;
var Zahnspuellbecher = 1.25;
var Zahnhaftcreme = 3.20;
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;

// 页面加载完成后绑定Enter键事件
document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    event.preventDefault();
    Calculate();
  }
});

function Calculate() {
  Sum = 0; // 直接重置Sum，无需判断是否为0
  let WaschlotionAmount = document.getElementById("WaschlotionAmount").value || 0;
  let HaarshampooAmount = document.getElementById("HaarshampooAmount").value || 0;
  let BodylotionAmount = document.getElementById("BodylotionAmount").value || 0;
  let WundschutzcremeAmount = document.getElementById("WundschutzcremeAmount").value || 0;
  let DeosprayAmount = document.getElementById("DeosprayAmount").value || 0;
  let ZahncremeAmount = document.getElementById("ZahncremeAmount").value || 0;
  let ZahnbuersteAmount = document.getElementById("ZahnbuersteAmount").value || 0;
  let ZahnspuellbecherAmount = document.getElementById("ZahnspuellbecherAmount").value || 0;
  let ZahnhaftcremeAmount = document.getElementById("ZahnhaftcremeAmount").value || 0;
  let ZahnreinigunstabsAmount = document.getElementById("ZahnreinigunstabsAmount").value || 0;
  let RasierklingenAmount = document.getElementById("RasierklingenAmount").value || 0;
  let RasiererMitKlingenAmount = document.getElementById("RasiererMitKlingenAmount").value || 0;
  let RasierschaumAmount = document.getElementById("RasierschaumAmount").value || 0;
  let EinwegrasiererAmount = document.getElementById("EinwegrasiererAmount").value || 0;
  let ZahnreinigunsBecherAmount = document.getElementById("ZahnreinigunsBecherAmount").value || 0;
  let MullkompressenAmount = document.getElementById("MullkompressenAmount").value || 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);

  var rounded = Sum.toFixed(2);
  document.getElementById("Sum").innerHTML = rounded;
}

function ClearAll() {
  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 = "";
  document.getElementById("Sum").innerHTML = ""; // 清空总和显示
}

额外优化点

在获取输入值时添加|| 0，避免空输入导致NaN错误
简化Sum的重置逻辑，直接赋值为0即可
清空按钮添加总和显示的清空操作，体验更完整

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

为化妆品计算器绑定Enter键触发计算的技术实现问题

问题概述 #

错误原因分析 #

修正方案 #

修正后的完整代码 #