如何在输入变更时触发动作？JS/JQ实现输入修改后更新Div文本

嘿，你的思路方向是对的，不过代码里有几个细节没处理到位，导致功能没正常跑起来。我帮你梳理问题并修正代码：

原代码的核心问题 #

• 在calculate()函数里，你直接把DOM元素（比如document.getElementById('fn')）传给Number.isInteger()了，这显然不对——你需要的是输入框里的数值，不是元素本身
• 计算求和时，你也是直接把两个DOM元素相加，这会把元素转换成字符串拼接，而不是做数字加法
• 验证函数只处理了数字超出范围的红色提示，没处理数字符合要求或者输入非数字时的颜色重置
• 当输入非数字内容时，parseInt()会返回NaN，这时候也需要做判断，避免错误计算

修正后的完整代码 #

<div class="expression box">
 <div class="form-field"><input class="input" id="fn" oninput="validFirstNumber(parseInt(this.value))" type="text" size="40"></div>
 <div class="form-field">+</div>
 <div class="form-field"><input class="input" id="sn" oninput="validSecondNumber(parseInt(this.value))" type="text" size="40"></div>
 <div class="form-field">=</div>
 <div class="form-field"><div id="result">?</div></div>
</div>

<script>
function validFirstNumber(number) {
  const fnInput = document.getElementById('fn');
  // 处理NaN（非数字输入）或数字超出范围的情况
  if (isNaN(number) || number < 6 || number > 9) {
    fnInput.style.color = 'Red';
  } else {
    // 数字符合要求时重置颜色
    fnInput.style.color = 'Black';
  }
  calculate();
}

function validSecondNumber(number) {
  const snInput = document.getElementById('sn');
  if (isNaN(number) || number < 6 || number > 9) {
    snInput.style.color = 'Red';
  } else {
    snInput.style.color = 'Black';
  }
  calculate();
}

function calculate() {
  const fnValue = parseInt(document.getElementById('fn').value);
  const snValue = parseInt(document.getElementById('sn').value);
  const resultDiv = document.getElementById('result');
  
  // 只有当两个值都是有效整数且在范围内时，才计算求和
  if (Number.isInteger(fnValue) && Number.isInteger(snValue) && fnValue >=6 && fnValue <=9 && snValue >=6 && snValue <=9) {
    resultDiv.innerHTML = fnValue + snValue;
  } else {
    // 不符合条件时，把结果改回?
    resultDiv.innerHTML = '?';
  }
}
</script>

关键修改说明 #

1. 验证函数优化：增加了isNaN判断，处理非数字输入的情况；同时补充else分支，在输入有效数字时把文字颜色重置为黑色，避免一直显示红色
2. calculate函数修正：
   • 先获取输入框的value并转成整数，再判断是否为有效整数
   • 增加了范围判断，确保只有符合6-9要求的数字才会计算求和
   • 不符合条件时，把result的内容重置为初始的?
3. 数字相加逻辑修正：现在是拿两个数值相加，而不是DOM元素拼接，得到正确的求和结果

内容的提问来源于stack exchange，提问作者Ilia Levikov