Conditionally change color of display field in details page

[wgalliance]

I would like to conditionally change the color of a display field on a detail page.

I have a set of 9 fields that are all set as display fields. If the value is "Incomplete" I would like it to show up in RED text, otherwise nothing changes. 

I have read several of the forums but most of them refer to tabular reports or a field which the user updates. This is simply a details page with a display field.

Thanks in advance,

[MayMusic]

Same code should apply here:

<div id="mydiv"> </div>
<SCRIPT LANGUAGE="JavaScript">

if ("[@field:First_Name]" == "Incomplete"){
document.getElementById("mydiv").innerHTML ="<span style='color:red;'> [@field:First_Name] </span>";
} else{
document.getElementById("mydiv").innerHTML ="[@field:First_Name]";

}
</SCRIPT>

Select [@field:First_Name] from picker in the code above. It should be the field you want to conditionally change the color for.

[wgalliance]

Thank you! I was able to add this and get the color to change dynamically for each instance.

[MayMusic]

You are most welcome

[Kurumi]

Hi - Just an update, for dynamically changing the font color of field values based on a condition - you can use this solution/CSS: https://howto.caspio.com/tech-tips-and-articles/dynamically-changing-colors-of-values/