How to identify the highest and lowest values stored in four fields then change background color?

[cynlink1]

Hello,

I have been asked to change the background colors of the highest and lowest values shown in the fields below. The fields values represent total scores (sum) derived from other fields on the form using client scripts. 

I know styles can be used to change the background color. However, I do not know how to write a client script that compares the values of the fields and then changes the background color as the field values change.  Or if there is an easier method that I am not familiar with yet. Please advise. Many thanks!

[Prasanna Phadt1]

Hi,

You can try OnLoad Client Script For the same. Here is an example of OnLoad Client Script :-

function onLoad() { 
var highestFieldValue = parseFloat(g_form.getValue('highestField'));
var lowestFieldValue = parseFloat(g_form.getValue('lowestField'));

// Compare values and set background color
if (highestFieldValue > lowestFieldValue) {
setFieldBackgroundColor('highestField', 'green'); 
setFieldBackgroundColor('lowestField', 'red');  
} else {
setFieldBackgroundColor('highestField', 'red');  
setFieldBackgroundColor('lowestField', 'green');  
}
}

function setFieldBackgroundColor(fieldName, color) {
var fieldControl = g_form.getControl(fieldName);

if (fieldControl) {

fieldControl.style.backgroundColor = color;

}
}