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

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

本文介绍如何将表单输入框的值声明为全局变量，使其在多个事件监听器间共享，并实现实时计算（如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);

✅ 关键要点说明：