本文介绍如何将表单输入框的值声明为全局变量，使其在多个事件监听器间共享，并实现实时计算（如bmi中的身高平方值），避免重复获取dom值或作用域限制问题。
本文介绍如何将表单输入框的值声明为全局变量，使其在多个事件监听器间共享，并实现实时计算（如bmi中的身高平方值），避免重复获取dom值或作用域限制问题。
在前端开发中，常需对多个输入框（如身高、体重）的值进行联动计算（例如计算BMI：weight / (height/100)²）。若将变量定义在事件回调内部，其作用域受限，无法跨事件访问；而将关键值提升至外层作用域，即可实现数据共享与即时响应。
正确做法是：将用于计算的变量（如 mtrsqr 和 weight）声明在事件监听器外部，作为模块级变量维护状态；同时在每个 input 事件中同步更新对应值，并可立即触发综合计算逻辑。
示例代码如下：
<input type="number" class="height-input" placeholder="身高（cm）"> <input type="number" class="weight-input" placeholder="体重（kg）"> <div id="bmi-result">BMI: —</div>
// 声明共享状态变量（位于事件监听器外部）
let mtrsqr = 0; // 身高换算后的平方米值（(height/100)²）
let weight = 0; // 当前体重数值
const heightInputEl = document.querySelector('.height-input');
const weightInputEl = document.querySelector('.weight-input');
const resultEl = document.getElementById('bmi-result');
// 监听身高输入：实时更新 mtrsqr
heightInputEl.addEventListener('input', () => {
const height = Number(heightInputEl.value) || 0;
mtrsqr = Math.pow(height / 100, 2); // 无需 Math.abs()，平方恒非负
});
// 监听体重输入：实时更新 weight
weightInputEl.addEventListener('input', () => {
weight = Number(weightInputEl.value) || 0;
});
// 可选：封装计算逻辑，便于复用和触发
function calculateBMI() {
if (mtrsqr > 0 && weight >= 0) {
const bmi = parseFloat((weight / mtrsqr).toFixed(1));
resultEl.textContent = `BMI: ${bmi}`;
} else {
resultEl.textContent = 'BMI: —';
}
}
// 在每次输入后执行计算（增强响应性）
heightInputEl.addEventListener('input', calculateBMI);
weightInputEl.addEventListener('input', calculateBMI);✅ 关键要点说明：
- 使用
let声明而非var，避免变量提升带来的意外行为； - 用
|| 0处理空值或非法输入，防止NaN传播； -
input事件比change更及时，支持实时反馈（包括粘贴、拖拽等操作）； - 将计算逻辑抽离为独立函数（如
calculateBMI），提升可读性与可测试性； - 若涉及更复杂状态管理（如多字段、校验、异步依赖），建议升级为
React状态或Observable模式。
通过合理提升变量作用域并结合事件驱动更新，即可轻量、可靠地实现多输入联动计算，为健康工具、表单验证、动态配置等场景提供坚实基础。
