如何实现输入框数值变更时无需点击按钮自动更新summe计算结果

你的代码有3个核心问题导致自动计算不生效：

• addEventListener 绑定事件时不需要加on前缀，onchange是元素属性绑定的写法，事件监听器里直接写input/change即可
• 仅给Backendbenutzer输入框绑定了事件，修改App-Benutzer输入框的值时不会触发计算逻辑
• change事件仅在输入框失焦时才触发，要做到输入即更新结果，应该使用触发时机更实时的input事件

修复后完整代码 #

JavaScript部分 #

const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');
const backendInput = document.querySelector('.backenduser');
const appInput = document.querySelector('.appuser');

// 抽离公共计算逻辑
function updateSum() {
  // 空值默认按0计算，避免出现NaN
  const backendNum = Number(backendInput.value) || 0;
  const appNum = Number(appInput.value) || 0;
  const total = backendNum * 35 + appNum * 7.5;
  // 保留两位小数，和初始展示格式匹配
  summetext.textContent = `Anzahl der Summe:${total.toFixed(2)}`;
}

// 两个输入框都绑定input事件，输入时实时计算
backendInput.addEventListener('input', updateSum);
appInput.addEventListener('input', updateSum);
// 保留原有按钮的计算功能
btncalc.addEventListener('click', updateSum);

HTML部分（原有代码无需大幅修改，可直接使用） #

App-Benutzer: <input type="number" placeholder="1-100" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value)" class='appuser'><br>
Backendbenutzer: <input type="number" placeholder="1-15" min="1" max="15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value)" class='backenduser'><br>
<button class='calcit'>Berechnen</button><br>
<span class='summe'>0.00</span><br>

修复后修改任意输入框的数值时，不需要点击按钮、不需要等输入框失焦，结果会实时更新在summe对应位置，输入为空时也不会出现异常的NaN值。

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