javascript - Change font color of variable in Java script

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>

<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>

Share Improve this question edited Mar 14, 2016 at 14:22 Eric Galluzzo 3,2411 gold badge21 silver badges20 bronze badges asked Mar 14, 2016 at 14:14 trace 131 gold badge1 silver badge3 bronze badges

3 There are basic syntax errors. read some tutorials on Javascript. – 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 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 Commented Mar 14, 2016 at 14:19
Remember it's JavaScript not Java. – evolutionxbox Commented Mar 14, 2016 at 14:20
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 Commented Mar 14, 2016 at 14:36

Add a ment |

4 Answers 4

Sorted by: Reset to default 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./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";

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>

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>

Use Jquery for simplification

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Change font color of variable in Java script - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)