基于计算结果修改只读resultbox颜色：添加功能后失效求助

原代码核心问题 #

• 颜色判断逻辑写在display函数外部，页面加载时仅执行一次，不会在输入框数值变化、调用display函数时重新触发颜色更新
• 判断条件错误地用DOM元素resultBox做数值比较，而非计算得出的result数值（DOM元素无法直接和数字比较）
• 目标元素混淆：原代码修改的是p2的颜色，但需求是为resultbox设置颜色（如果resultbox就是p2可忽略此点，否则需调整目标元素）

修复后的完整代码 #

<script type="text/javascript">
  function display(){
      var resultBox = document.getElementById("resultbox");
      var input1 = document.getElementById("input1");
      var input2 = document.getElementById("input2");

      // 转换为数值类型，避免字符串相乘异常
      var result = Number(input1.value) * Number(input2.value);
    
      resultBox.value = result;

      // 将颜色判断逻辑放入函数内部，每次计算后触发
      if (result >= 1 && result <= 3) {
          resultBox.style.color = "green";
      } else if (result >= 4 && result <= 9) {
          resultBox.style.color = "yellow";
      } else if (result >= 10 && result <= 19) {
          resultBox.style.color = "orange";
      } else if (result >= 20) {
          resultBox.style.color = "red";
      } else {
          // 处理空值、非数字等异常情况
          resultBox.style.color = "black";
      }
  }
</script>

额外优化说明 #

• 加入Number()转换，确保输入值被正确解析为数值，避免输入字符串时出现计算错误
• 明确区间边界条件，严格匹配需求中的1-3、4-9等闭区间
• 增加异常值处理，避免输入无效内容时颜色显示异常

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