Change font color of variable in Java script

Question

I'm new to HTML, CSS, and Java programming. I'm trying to change the color and text of an HTML element in JavaScript. Here is what I have. (Pressure_OK is tied to an input; you can manually set it to 0 or 1.) Basically, if the input is 0, then I want it to pass Okay in text form, but I want the text to be green. Otherwise, I want it to be Not Okay in red.

<p  id="pressure"></p>

<script>
var Pressure;
if ('"Pressure_Ok"'==1)
{
    Pressure ="Okay"; 
    press = document.getElementById("pressure").innerHTML = Pressure;
    press.style.color= 'green';
}
else
{
    Pressure ="Gas Pressure: Not Okay"; 
    press = document.getElementById("pressure").innerHTML = Pressure;
    press.style.color= 'red';
}
</script>

There are basic syntax errors. read some tutorials on Javascript. — Gaurav Rai
– Gaurav Rai, Commented Mar 14, 2016 at 14:17
Where is your input field ? and what is '"Pressure_Ok"' is this your variable name which holds the value ? — abhishekkannojia
– abhishekkannojia, Commented Mar 14, 2016 at 14:19
The issue is press is not assigned the DOM object, but it's .innerHTML. You need to var press = document.getElementById("pressure"); and THEN on another line, assign the textContent (if you're not assigning HTML, don't use innerHTML. Then set the DOM color — Sterling Archer
– Sterling Archer, Commented Mar 14, 2016 at 14:19
Pressure_OK is a vale i get from a server. You can replace it with a var value and give it a value of 0 or 1. When i get a value of 1 from the server it indicates that the pressure sensor is on. — trace
– trace, Commented Mar 14, 2016 at 14:36

Erik · Accepted Answer · 2016-03-14 14:25:37Z

3

Have you tried setting the element or font color to green instead of the innerHtml? I'm fairly certain you're trying to use a CSS style on a string, which shouldn't do anything.

If you want to set the font color to green then you should be changing the font color, not the style color.

var str = "Hello World!";
var result = str.fontcolor("green");

http://www.w3schools.com/jsref/jsref_fontcolor.asp

One thing to watch out for with JS and JQ is exactly what object you're operating on. Where you have

press = document.getElementById("pressure").innerHTML

is where the problem is, since on the next line you're acting on the innerHtml of the element and not the element itself.

Aka, try this:

press = document.getElementById("pressure")
press.innerHTML = Pressure;
press.innerHTML.fontcolor("red");

or conversely:

press = document.getElementById("pressure")
press.innerHTML = Pressure;
press.style.color = "red";

answered Mar 14, 2016 at 14:25

Erik

1696 bronze badges

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

8 Comments

trace Over a year ago

Thanks for clarifying. To make it more clear what im doing is, i have a value which is Pressure_OK. That value will either be a 0 or 1. (this is done using a pressure sensor which is connected to a server. so basically this sensor can go off or on. With that in mind im trying to use a web page to give the status. So if its on,, i want to display okay on the web page. other wise not okay. I just want to incorporate some color to the string. green as good, red as bad.

Erik Over a year ago

I'd use the second option to just change the style color (less mess and stuff to keep track of imho). If you want easier syntax I'd even go as far as to suggest adding/using Jquery (check out the answer below this one), although since you're new to web tech it's best to start with vanilla JS to get a feel for the DOM and such. Another tip, JS is loosely typed. If you're '"Pressure_OK"' var is an int then you don't need the ==1 at all, you can just check if('"Pressure_OK"'){ //stuff } JS will assume almost anything other than an empty/null string or 0 is true.

Erik Over a year ago

Also I'm a noob to SO! If I helped to answer your Q then remember to mark my A! I need more pts so I can post stuff.

trace Over a year ago

absolutely, i will give it a try. at the moment im only seeing not oky even though the sensor is on. i will need to dig a bit deeper on why that is the case. thanks!!

Erik Over a year ago

Np. I'd suggest verifying that '"Pressure_OK"' will return how you want it to in the dev console of your browser, since that's you're only check that could fail.

|

Quentin Roger · Accepted Answer · 2016-03-14 14:23:06Z

0

I fixed the syntax but I dont know what are you trying to achieve

var Pressure;
if ('"Pressure_Ok"'==1)
{
      Pressure ="Okay"; 
      var press = document.getElementById("pressure")
      press.innerHTML = Pressure;
      press.style.color= 'green';
}
else
{
      Pressure ="Gas Pressure: Not Okay"; 
      var press = document.getElementById("pressure")
      press.innerHTML = Pressure;
      press.style.color= 'red';
}

<span id="pressure"></span>

answered Mar 14, 2016 at 14:23

Quentin Roger

6,5482 gold badges26 silver badges37 bronze badges

Comments

user1147188 · Accepted Answer · 2016-03-14 14:23:10Z

0

You should try something like this:

<!DOCTYPE html>
<html>
<body>

<p  id="pressure"></p>

<script>
var Pressure;
if ('"Pressure_Ok"'==1){
Pressure ="Okay"; 
press = document.getElementById("pressure").innerHTML = Pressure;
document.getElementById("pressure").style.color= 'green';

}
else{
Pressure ="Gas Pressure: Not Okay"; 
press = document.getElementById("pressure").innerHTML = Pressure;
document.getElementById("pressure").style.color= 'red';
}
</script>
</body>
</html>

answered Mar 14, 2016 at 14:23

user1147188

1352 gold badges3 silver badges12 bronze badges

1 Comment

trace Over a year ago

Thanks user! i'llk give this a try!

Kartikeya Sharma · Accepted Answer · 2016-03-14 14:40:10Z

0

Use Jquery for simplification

  $("#pressure").css("color","red");

answered Mar 14, 2016 at 14:40

Kartikeya Sharma

5531 gold badge5 silver badges22 bronze badges

4 Comments

trace Over a year ago

I'll take a look at Jquery. I'm not sure what it is to be honest, soi will try to read about it first.

evolutionxbox Over a year ago

@trace Learn standard JS before using jQuery. Although you might find jQuery easier to start with, it can hide JS fundamentals from you.

trace Over a year ago

Will do. I know its alot to digest but it will take time. In the meantime, thanks for your help :)

Kartikeya Sharma Over a year ago

If you dont want to use jQuery you can easily use the javascript document.getElementById("pressure").style.color="red";

Collectives™ on Stack Overflow

Change font color of variable in Java script

4 Answers 4

8 Comments

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related