Jump to content
NJGonzo

Change The Color Of The Text Based On Criteria In If Statement

Recommended Posts

I am trying to change the color of the text in a data page list view.  I already have a script in place in an HTML Block that changes the Background color based on criteria in an if statement. I figured it would be a simple modification of this script to change the variable from "backgroundcolor" to something else. (perhaps "foregroundcolor" or "textcolor"?) But nothing I try works. and I can't find anything online that mentions anything about this.  Any ideas would be appreciated.  Here is the script I am currently using to control my background color:

 

 
[@field:Complete]


<a id="visi[@field:Record_Number]">


<script>
var isi = document.getElementById("visi[@field:Record_Number]");

if('[@field:Firm_Deadline]' == 'Yes'){
isi.parentNode.parentNode.style.backgroundColor = '#A00101';
}


</script>
 
 
Thanks in advance!

Share this post


Link to post
Share on other sites
Hi NJGonzo,

 

If I understand correctly, you want to change the color of all values in the fields.

 

You can use following code in HTML block field:

 

<a id="visi[@field:autonumber]"></a>

<script>

var isi = document.getElementById("visi[@field:autonumber]");

if('[@field:text]' == 'Yes'){

var listItem = isi.parentNode.parentNode;

var list = listItem.getElementsByClassName('cbResultSetData');

for(var i = 0; i < list.length; i++){

list.style.color = '#A00101';

}

}

</script>

Enter names of your fields instead of autonumber and text.

 

Hope it helps.

Share this post


Link to post
Share on other sites

I'm not trying to change the colors of the entire list, only the specific entry that meets the criteria of the if statement.  I tried to understand your logic Iren and modified it as follows, but it didn't work. Am I missing something? This code works properly to change the background color for the specific entries that meet the criteria, but I need to change the text color and the background colors.

 

Thanks.

 

 

[@field:Complete]


<a id="visi[@field:Record_Number]">


<script>
var isi = document.getElementById("visi[@field:Record_Number]");

if('[@field:Firm_Deadline]' == 'Yes'){
isi.parentNode.parentNode.style.backgroundColor = '#A00101';

var listItem = isi.parentNode.parentNode;
var list = listItem.getElementsByClassName('cbResultSetData');

list[@field:Record_Number].style.color = '#00FFFF';}

</script>

Share this post


Link to post
Share on other sites
Hi NJGonzo,

 

You can use the next code to change the text color and background only for the specific entry based on criteria:

 



<a id="visi[@field:autonumber]"></a>
<script>
var isi = document.getElementById("visi[@field:autonumber]");
if('[@field:text]' == 'Yes'){
var listItem = isi.parentNode.parentNode;
listItem.style.backgroundColor = '#A00101';
var list = listItem.getElementsByClassName('cbResultSetData');
for(var i = 0; i < list.length; i++){
list[i].style.color = '#00FFFF';
}
}
</script>  


 

Hope it works.

Share this post


Link to post
Share on other sites

unfortunately that is still not working. I copied and pasted it exactly as is and only changed the autonumber and text fields. The background color changes properly but the text color is still black.  I then removed the line that affected the background thinking I could try to just do the text, but it did nothing.  I'm wondering if the 'style.color' command is the correct command. or If I understand your code correctly, it looks like you are actually using

 

  isi.parentNode.parentNode.getElementsByClassName('cbResultSetData').style.color    ???

 

but what do I know?  :)

 

any other ideas?

 

Thanks in advance...

Share this post


Link to post
Share on other sites

Right-click on an element and choose Inspect Element.

 

Find the Style section and look for multiple "color: ***" entries.

 

You may be styling that element unknowingly from a different style that is overriding the code above.

Share this post


Link to post
Share on other sites
Hi NJGonzo,
 
It seems it was misunderstanding. If you use the tabular search report, you can use the following code: 
<a id="visi[@field:autonumber]"></a>
<script>
var isi = document.getElementById("visi[@field:autonumber]");


var v_tr = isi.parentNode.parentNode;
var v_tds = v_tr.getElementsByTagName('td');
for(var v_i=0;v_i<v_tds.length;v_i++)
{
    if('[@field:text]' == 'Yes')
{
     v_tds[v_i].style.color='#00FFFF';
v_tr.style.backgroundColor = '#A00101';
}
}
</script> 

Enter names of your fields instead of autonumber and text.

 

Let me know if this helps. 

Share this post


Link to post
Share on other sites

Iren,

 

Thank you for all of your help. We are almost there.  The script changes the text color but only for the text in the 1st column (in my particular case - the date due), (take a look at the link I provided you)  How do we get it to change the text for all the items across the row?

 

Thanks again!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...