如何在事件外部获取两个输入框的值并实时执行计算？

把计算逻辑抽成独立函数，不管哪个输入框的值变化，都调用这个函数来获取两个输入框的最新值并完成计算。这样就能保证每次输入变化时，都能同时拿到两个值进行运算。

修改后的代码如下：

const heightInputEl = document.querySelector('.height-input');
const weightInputEl = document.querySelector('.weight-input');

// 独立的计算函数
function calculate() {
  // 直接获取两个输入框的当前值
  const height = Number(heightInputEl.value);
  const weight = Number(weightInputEl.value);

  // 先判断两个值是否有效（避免NaN或非正数导致计算错误）
  if (!isNaN(height) && height > 0 && !isNaN(weight) && weight > 0) {
    const mtrsqr = Math.pow(height / 100, 2);
    // 这里可以添加具体计算逻辑，比如计算BMI
    const bmi = weight / mtrsqr;
    console.log('计算结果：', bmi.toFixed(2));
    // 也可以把结果渲染到页面元素中，比如：
    // document.querySelector('.result').textContent = `BMI：${bmi.toFixed(2)}`;
  }
}

// 给两个输入框都绑定input事件，触发计算函数
heightInputEl.addEventListener('input', calculate);
weightInputEl.addEventListener('input', calculate);

关键说明： #

• 把计算逻辑从事件回调中抽离，避免重复代码，同时确保每次触发都能获取两个输入框的最新值。
• 增加了值的有效性校验，防止用户输入非数字、零或负数时出现计算异常。
• 你可以根据实际需求，在calculate函数里补充结果的展示逻辑，比如把计算值显示到页面的指定区域。

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