如何在事件外部访问两个输入框的实时值以执行即时计算-js教程-PHP中文网

如何在事件外部访问两个输入框的实时值以执行即时计算

本文介绍如何将表单输入框的值声明为全局（或作用域外）变量，使其在多个事件监听器间共享，从而支持如bmi计算等需要同时读取多个输入值的实时运算。

本文介绍如何将表单输入框的值声明为全局（或作用域外）变量，使其在多个事件监听器间共享，从而支持如bmi计算等需要同时读取多个输入值的实时运算。

在Web开发中，常需根据用户输入实时响应——例如根据身高（cm）和体重（kg）动态计算BMI（身体质量指数），公式为：BMI = weight / (height/100)²。但若将 height 和 weight 仅定义在各自 input 事件回调内，它们彼此不可见，无法完成联合计算。

解决关键在于提升变量作用域：将存储输入值的变量（如 height、weight）及中间结果（如 mtrsqr）声明在事件监听器外部，使其成为闭包内的共享状态：

// 在事件监听器外声明变量，确保跨事件可访问
let height = 0;     // 身高（cm）
let weight = 0;     // 体重（kg）
let mtrsqr = 0;     // 身高换算后的平方米值：(height/100)²

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

// 监听身高输入变化
heightInputEl.addEventListener('input', () => {
  height = Number(heightInputEl.value) || 0;
  mtrsqr = Math.pow(height / 100, 2); // 可省略 Math.abs()，因平方恒非负
});

// 监听体重输入变化
weightInputEl.addEventListener('input', () => {
  weight = Number(weightInputEl.value) || 0;
});

// ✅ 现在可在任意位置安全使用 height、weight、mtrsqr
// 例如：每输入一次就更新BMI显示
function updateBMI() {
  if (height > 0 && weight > 0 && mtrsqr > 0) {
    const bmi = parseFloat((weight / mtrsqr).toFixed(1));
    document.querySelector('#bmi-result').textContent = bmi;
  }
}

// 推荐：统一触发计算（避免重复逻辑）
heightInputEl.addEventListener('input', updateBMI);
weightInputEl.addEventListener('input', updateBMI);

⚠️ 注意事项：