javascript - 根据输入值设置字体颜色

Question

为我的学校俱乐部做一个有趣的项目，想为我的演示增添一点趣味。我知道我想要什么，但不知道如何实现它。

我想要一行内容为:“您的能源消耗成功率为(值)％。”

我已经有了该值的来源，但我需要有关显示的帮助。

我想要做的是让(值)的字体颜色根据值本身是动态的。因此，如果值<0，字体颜色=红色，如果值=0，字体颜色为黄色，如果值>0，字体颜色为绿色。

我不是一名网页设计师/代码专家，我不确定如何在 HTML 中实现这一点。我还阅读了一些类似类型的问题，但学校不允许我上传任何 JavaScript 文件，但我认为如果确定我需要使用 JavaScript，我可以链接到 ajax.googleapis.com 网站。

感谢任何帮助。

Answer 1

function color() {
   var colorr = document.getElementById("color1").value;
   if(colorr==''){
    document.getElementById("changecolor").style.color = "black";
   }
   else if(colorr<0){
    document.getElementById("changecolor").style.color = "red";
   }
   else if(colorr>0){
    document.getElementById("changecolor").style.color = "green";
   }
   else if(colorr==0){
      document.getElementById("changecolor").style.color = "yellow";
   }
   
}

<input type="text"  onkeyup="color();" name="color" id="color1">
<h1 id="changecolor">Change Color on input color</h1>