只读结果框根据计算改变颜色答案

【问题标题】：readonly resultbox change color based on calculation只读结果框根据计算改变颜色
【发布时间】：2022-11-14 14:08:03
【问题描述】：

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

      var result = input1.value * input2.value;
      resultBox.value = result;
  }
</script>

我正在使用它，但如果答案是 1-3，我希望结果变为绿色；如果答案是 4-9，则变为黄色；如果是 10-19，则变为橙色；如果是红色，则为 20 > 上面的代码有效，但是当我添加更改颜色时功能它不会改变颜色

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

      var result = input1.value * input2.value;
    
      resultBox.value = result;
  }

  if (resultBox <=3) {
  resultBox = document.getElementById("p2").style.color = "green";
} else if (resultBox<=9) {
  resultBox = document.getElementById("p2").style.color = "yellow";
  
  
} 
else if (resultBox <=19) {
  resultBox = document.getElementById("p2").style.color = "orange";
}
else {
  resultBox = document.getElementById("p2").style.color = "red";
}
</script>

【问题讨论】：

标签： javascript html function colors display

【解决方案1】：

在这样的行：

resultBox = document.getElementById("p2").style.color = "orange";

您已经结合获取 p2 元素并设置其颜色，但它不正确。结果将是您的颜色发生变化，但 resultBox 中包含 orange 值。

如果您想这样做，请使用两个单独的行：

resultBox = document.getElementById("p2");
resultBox.style.color = "orange";

或者用括号强制执行命令（不推荐）：

(resultBox = document.getElementById("p2")).style.color = "orange";

更重要的是，您的代码只执行一次——仅在页面首次加载时执行。尝试放置代码以更改 display() 函数内的结果框文本颜色，以便每次调用 display() 时都会运行它：

（我还整理了您的缩进并在此 sn-p 中编写了一些代码。）

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

      var result = input1.value * input2.value;
    
      resultBox.value = result;

      if (resultBox <=3) {
        resultBox.style.color = "green";
      } else if (resultBox<=9) {
        resultBox.style.color = "yellow";
      } else if (resultBox <=19) {
        resultBox.style.color = "orange";
      } else {
        resultBox.style.color = "red";
      }
  }
</script>

【讨论】：