background color of field not working in client script

[sunil7]

Hi everyone , I want to change the background color of field Resudual Risk(u_priority) string field with choices , Writing one onload client script but not working please see below

Code : onload client script 

code is going inside if and getting alert but background color is not changing

var element = g_form.getElement('u_priority');
   // alert(element);
    var accessType = g_form.getValue('u_priority');
    if (accessType == 'Low') {
   alert(accessType);
        element.style.backgroundColor = "LimeGreen";
    }
    if (accessType == 'Medium') {
  alert(accessType);
        element.style.backgroundColor = "yellow";
    }
    if (accessType == 'High') {
	alert(accessType);
        element.style.backgroundColor = "orange";
    }
    if (accessType == 'Well Controlled') {
  alert(accessType);
        element.style.backgroundColor = "green";
    }
    if (accessType == 'Critical') {
  alert(accessType);
        element.style.backgroundColor = "red";
    }

[Sagar Pagar]

Hi,

You have to get the control of your field and set background with style.

Try this updated script -

function onLoad() {
	//Type appropriate comment here, and begin script below
	var element = g_form.getElement('u_priority');

	var priControl = g_form.getControl('u_priority');

	// alert(element);
	var accessType = g_form.getValue('u_priority');
	if (accessType == 'Low') {
		alert(accessType);
		//	element.style.backgroundColor = "LimeGreen";
		priControl.style.backgroundColor = "LimeGreen";
	}
	if (accessType == 'Medium') {
		alert(accessType);
		//	element.style.backgroundColor = "yellow";
		priControl.style.backgroundColor = "yellow";

	}
	if (accessType == 'High') {
		alert(accessType);
		//	element.style.backgroundColor = "orange";
		priControl.style.backgroundColor = "orange";

	}
	if (accessType == 'Well Controlled') {
		alert(accessType);
		//	element.style.backgroundColor = "green";
		priControl.style.backgroundColor = "green";

	}
	if (accessType == 'Critical') {
		alert(accessType);
		//	element.style.backgroundColor = "red";
		priControl.style.backgroundColor = "red";

	}
}

Thanks,

Sagar Pagar

[Ankur Bawiskar]

Hi,

is the filed read-only?

If yes then the background color won't work

Also update your this line -> use getControl() to apply color and not getElement()

var element = g_form.getControl('u_priority');
var accessType = g_form.getValue('u_priority');
if (accessType == 'Low') {
    alert(accessType);
    element.style.backgroundColor = "LimeGreen";
}
if (accessType == 'Medium') {
    alert(accessType);
    element.style.backgroundColor = "yellow";
}
if (accessType == 'High') {
    alert(accessType);
    element.style.backgroundColor = "orange";
}
if (accessType == 'Well Controlled') {
    alert(accessType);
    element.style.backgroundColor = "green";
}
if (accessType == 'Critical') {
    alert(accessType);
    element.style.backgroundColor = "red";
}

Regards
Ankur

[sunil7]

Thank you Actually field was automatically read only bcoz of calculated value

[Ankur Bawiskar]

@sunil

Thank you for marking my response as helpful.

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards
Ankur