FAQ: Change the color of input fields depending on the selected content
## Answer
Use "「Script」".
---
## Overview
Create a recorded table, enable ClassA, NumA and B, then create a new "「Script」" and write the following script.
Check "Create new" and "Edit" for the output destination to update.
If A is selected in ClassA, change the border of NumA to blue. If B is selected, change the border of value B to blue. This is a sample script that returns the display of NumA and B to values other than A and B.
##### JavaScript
```
$(document).on('change', '#' + $p.getControl('ClassA')[0].id, function() {
const myClassA = $p.getControl('ClassA').val();
const myCssBlue = {'borderColor': 'blue', 'background': '#f0f8ff'};
const myCssDefault = {'borderColor': '#c0c0c0', 'background': 'white'};
switch(myClassA) {
case 'A':
// Processing for NumA
$p.getControl('NumA').css(myCssBlue);
// Processing for NumB
$p.getControl('NumB').css(myCssDefault);
break;
case 'B':
// Processing for NumB
$p.getControl('NumB').css(myCssBlue);
// Processing for NumA
$p.getControl('NumA').css(myCssDefault);
break;
default:
// Processing for NumA
$p.getControl('NumA').css(myCssDefault);
// Processing for NumB
$p.getControl('NumB').css(myCssDefault);
break;
}
});
```
## Related Information
<div id="ManualList">
<article class="s-blog_list_unit"><h2>
<h2>The specified information was not found.</h2>
<p><a href="/ja/manual">Return to top</a></p>
</article>
</div><input id="SearchTextHidden" type="hidden" value="" />
