Set font color based on input value

Question

Doing a fun project for my school club and want to spice up my presentation a little bit. I know what I want but no idea how to make it happen.

I want a line that reads: "Your success rate for energy consumption is (value)%."

I already have the source for the value but I need help with the display.

What I am looking to do is have the font color for the (value) be dynamic based on the value itself. So, if the value is <0 font color=red, if value is =0, font color is yellow, if value is >0 font color is green.

Not being a web designer/code guru I'm not sure how to make this happen in HTML. I also read through a few similar types of questions but the school won't let me upload any JavaScript files but I think I can link to the ajax.googleapis.com site just fine if it's determined I need to use JavaScript.

Any help is appreciated.

To quickly change the font color in html: String color = "red"; String msg = "<html>Your success rate for energy consumption is <font color=" + color + ">" + value + "</font>%.</html>". You can display this string in a JLabel or whatever. Where do you want to display this sort of string? — DevilsHnd - 退した
– DevilsHnd - 退した, Commented Apr 18, 2018 at 1:44
Do you want the program to be a web-based application, or would you prefer the program to be more desktop-based (where an IDE or Java compiler such as Eclipse runs the program)? — MattGotJava
– MattGotJava, Commented Apr 18, 2018 at 2:05
Javascript has nothing to do with Java...but you mentioned you want this in html, so most likely you want to use Javascript, not Java. The website you provided is a list of hosted libraries, which you don't need to use for this simple purpose. Unless you find out what format you are creating, it's difficult for others to help. — practicemakesperfect
– practicemakesperfect, Commented Apr 18, 2018 at 2:13

Manthan Kanpariya · Accepted Answer · 2018-04-18 08:59:16Z

2

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>

edited Apr 18, 2018 at 8:59

answered Apr 18, 2018 at 4:43

Manthan Kanpariya

1041 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Snazzle Over a year ago

Thanks for the super fast reply and it works perfect in our html application but it isn't working in our report program. I asked the computer teacher and he said to mention it is in a html container in micro strategy. Does that make a difference in the HTML code or javascript? I copied what you provided and added <script></script> to contain the javascript. Not sure if that was the right thing to do. I'm sorry for being so difficult.

Collectives™ on Stack Overflow

Set font color based on input value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related