Javascript to change background and font colors

[matstein]

I am trying to have my tabular report change the background and font color if the calculated values are within certain ranges.  Example if value is below 10 I would like the field to be red background white font, if the value is 11-49 orange background and white font, 50-100 yellow background.  Anything above 100 is no style.

 

The following code in placed in the footer works great for all four calculated fields at once to turn below 10 into red but I can't figure out how to do white font and also add the other "If else" statements to work for all the ranges.

<script>


document.querySelectorAll(`[action*="[@cbAppKey]"] .cbResultSetCalculatedField`).forEach(function(elem) {
 if(elem.innerHTML < Math.abs(10)) elem.style.backgroundColor = "red";

})

</script>

Thanks in advance!

 

 

[matstein]

I figured it out, if anyone needs it in the future here is the code I used.

 

<script>


document.querySelectorAll(`[action*="[@cbAppKey]"] .cbResultSetCalculatedField`).forEach(function(elem) {
 if(elem.innerHTML < Math.abs(10)) {
	 elem.style.backgroundColor = "red"; elem.style.color = "white";
 
} else if(elem.innerHTML >= Math.abs(11) && elem.innerHTML <= Math.abs(49)) {
	elem.style.backgroundColor = "orange"; 
	
} else if(elem.innerHTML >= Math.abs(50) && elem.innerHTML <= Math.abs(100)) {
	elem.style.backgroundColor = "yellow"; 

} else {
		elem.style.backgroundColor = "white"; 
 }
})

</script>