本文讲解如何将表单输入框的值声明为全局（或作用域外）变量，使其在多个事件监听器间共享，并在任意时刻进行实时计算（如 bmi 中的身高平方值与体重值组合运算）。
本文讲解如何将表单输入框的值声明为全局（或作用域外）变量，使其在多个事件监听器间共享，并在任意时刻进行实时计算（如 bmi 中的身高平方值与体重值组合运算）。
在 Web 表单开发中，常需对多个输入字段（如身高、体重）进行联动计算（例如 BMI = 体重(kg) / 身高²(m²)）。若将变量定义在事件回调内部，其作用域受限，无法跨事件访问。正确做法是将关键值提升至共同作用域（如函数外部或模块顶层），再通过事件同步更新。
以下是一个结构清晰、可维护的实现方案：
// 声明共享状态变量（初始化为合理默认值，避免 NaN）
let heightInCm = 0;
let weightInKg = 0;
let heightInMetersSquared = 0;
const heightInputEl = document.querySelector('.height-input');
const weightInputEl = document.querySelector('.weight-input');
// 监听身高输入：实时更新 cm 值及换算后的 m²
heightInputEl.addEventListener('input', () => {
const value = Number(heightInputEl.value) || 0;
heightInCm = value;
heightInMetersSquared = Math.pow(value / 100, 2); // 无需 Math.abs() — 平方恒非负
});
// 监听体重输入：仅更新 kg 值
weightInputEl.addEventListener('input', () => {
weightInKg = Number(weightInputEl.value) || 0;
});
// ✅ 此时可在任意位置安全调用计算逻辑（如按钮点击、定时检查、或另一个事件）
function calculateBMI() {
if (heightInMetersSquared > 0 && weightInKg >= 0) {
return parseFloat((weightInKg / heightInMetersSquared).toFixed(1));
}
return null; // 数据不全时返回空值，便于 UI 处理
}
// 示例：实时显示 BMI（可绑定到 span 或实时反馈区）
const bmiDisplay = document.querySelector('#bmi-result');
if (bmiDisplay) {
const updateBMI = () => {
const bmi = calculateBMI();
bmiDisplay.textContent = bmi !== null ? `BMI: ${bmi}` : '请输入有效身高和体重';
};
// 为两个输入绑定统一更新逻辑（更推荐的方式）
heightInputEl.addEventListener('input', updateBMI);
weightInputEl.addEventListener('input', updateBMI);
}
注意事项：
- 避免使用
var声明（易引发变量提升与作用域混淆），优先使用let/const； - 使用
|| 0或Number(val) || 0防止空值、非数字输入导致NaN传播； -
Math.abs(Math.pow(...))是冗余的——Math.pow(x, 2)对任意实数 x 结果恒 ≥ 0； - 若需更高健壮性，建议封装为类或使用
Proxy实现响应式数据，但对简单场景，上述共享变量模式已足够清晰高效。
通过合理提升状态作用域，你不仅能实现“输入即计算”，还能为后续扩展（如历史记录、单位切换、校验提示）打下坚实基础。
