How to color-code the search results (report) that reference a calculated field compared to another field

[ClayG]

I don't have a question. I just wanted to share.

I have appreciated previous posts and Caspio articles on how to use Javascript to change background colors on a row or cell when a certain value is detected. 

Recently, I wanted to do this on a calculated field, but I also wanted to color the row by comparing two values in a record, and I wanted a different background color depending on that comparison. In my case, I have a column in the table called Target and a calculated field called Count. By way of explanation, we ask people to volunteer on teams and the "count" shows how many people that have volunteered so far and "target" is our goal of how many we hope to get on a team. 

So I color-code a row with green when we've met our target number of volunteers, and I color-code the row as light red when we're still short.

I started with this Caspio "howto" article. Here's the code I used.

1. On the screen for Configure Results Page Fields, I added an HTML block as the first element. 
   It just had this single line:   <div id="visi[@field:Record_ID]">
   
   NOTE: my field called "Record_ID" is a unique field. It is import to reference a unique field like an autonumber field.
    
2. I added another HTML block in my list of datapage elements. It's the last element, which allows the entire row in the report to get the background color.
   In the code below, I'm comparing my field called "Target_No" against the calculated field that I have labeled as "Count".

   </div>

   <script>
   if("[@field:Target_No]" > "[@calcfield:1#]"){
   var isi = document.getElementById("visi[@field:Record_ID]");
   isi.parentNode.parentNode.style.backgroundColor= "#ffe6e6";
   }
   else if("[@field:Target_No]" == "[@calcfield:1#]"){
   var isi = document.getElementById("visi[@field:Record_ID]");
   isi.parentNode.parentNode.style.backgroundColor= "#e6ffe6";
   }
   </script>