两个TextField值反向联动异常：输入时显示NaN，求解决方案

我来帮你搞定这个问题！先看看你代码里的几个关键问题：

原代码的核心问题 #

• 逻辑搞反了：你在txtfld1的change事件里修改了e.source.value（也就是txtfld1自己的值），而不是另一个输入框txtfld2，这完全不符合反向联动的需求。
• 没有处理非数字输入：如果用户输入的不是有效数字，parseFloat会返回NaN，直接计算就会导致结果也是NaN。
• 缺少循环触发防护：当你修改另一个输入框的值时，会触发它的change事件，可能导致无限循环更新。

可行的解决方案 #

下面是修正后的代码，我会逐点解释：

// 固定基准值
const content = 10;
// 用来标记是否正在更新，防止循环触发事件
let isUpdating = false;

// 给txtfld1绑定change事件
txtfld1.addEventListener('change', function(e) {
  // 如果正在更新，直接跳过
  if (isUpdating) return;
  
  // 解析当前输入值，确保是有效数字，不是的话设为0
  const val1 = parseFloat(e.target.value) || 0;
  // 计算txtfld2应该显示的值
  const val2 = content - val1;
  
  // 标记为正在更新，避免触发txtfld2的change事件后重复计算
  isUpdating = true;
  // 设置txtfld2的值
  txtfld2.value = val2;
  // 取消标记
  isUpdating = false;
});

// 给txtfld2绑定change事件，逻辑和上面一致
txtfld2.addEventListener('change', function(e) {
  if (isUpdating) return;
  
  const val2 = parseFloat(e.target.value) || 0;
  const val1 = content - val2;
  
  isUpdating = true;
  txtfld1.value = val1;
  isUpdating = false;
});

关键细节说明 #

• 修正联动逻辑：当修改txtfld1时，计算并设置txtfld2的值，反之亦然，这才是反向联动的正确逻辑。
• 处理NaN情况：用parseFloat(val) || 0，如果解析结果是NaN（比如输入了字母、符号），就默认用0代替，避免显示NaN。
• 防止循环触发：添加isUpdating标志位，当我们通过代码设置另一个输入框的值时，跳过事件处理，避免无限循环更新。

额外优化（可选） #

如果你想在用户输入过程中实时联动（而不是只在change事件触发时），可以把change事件换成input事件，这样输入时就会实时更新另一个输入框的值。

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