# Bug? script changes colours correctly in designer preview but not on web page **URL:** \ **Category:** Ignition\ **Tags:** perspective, ignition80\ **Created:** [June 29, 2022, 11:24am UTC](https://forum.inductiveautomation.com/t/bug-script-changes-colours-correctly-in-designer-preview-but-not-on-web-page/61344 "2022-06-29T11:24:39Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Dean\_Walsh](https://avatars.discourse-cdn.com/v4/letter/d/8797f3/32.png) [@Dean\_Walsh](https://forum.inductiveautomation.com/u/Dean_Walsh)\ **Post date:** [June 29, 2022, 11:24am UTC](https://forum.inductiveautomation.com/t/bug-script-changes-colours-correctly-in-designer-preview-but-not-on-web-page/61344/1 "2022-06-29T11:24:39Z")
I have several icons which i have given a event script onClick which should change all of their colours (to indicate which one has been selected) and it works perfectly in the designer but in the web page it does not change the colours as expected The code is simply but theres a good few lines and maybe it cant handle that but it really seems like it should; the second part which turns the powercharts visible works correctly. ```auto self.props.color = "#25C100" self.parent.parent.getChild("FPS03").getChild("Icon").props.color = "A5A5A5" self.parent.parent.getChild("FPS04").getChild("Icon").props.color = "A5A5A5" self.parent.parent.getChild("FPS05").getChild("Icon").props.color = "A5A5A5" self.parent.parent.getChild("FPS06").getChild("Icon").props.color = "A5A5A5" self.parent.parent.getChild("FPS07").getChild("Icon").props.color = "A5A5A5" self.parent.parent.getChild("FPS08").getChild("Icon").props.color = "A5A5A5" self.parent.parent.getChild("FPS11").getChild("Icon").props.color = "A5A5A5" self.parent.parent.getChild("FPS12").getChild("Icon").props.color = "A5A5A5" self.parent.parent.getChild("Powercharts").getChild("fps01").meta.visible = 1 self.parent.parent.getChild("Powercharts").getChild("fps03").meta.visible = 0 self.parent.parent.getChild("Powercharts").getChild("fps04").meta.visible = 0 self.parent.parent.getChild("Powercharts").getChild("fps05").meta.visible = 0 self.parent.parent.getChild("Powercharts").getChild("fps06").meta.visible = 0 self.parent.parent.getChild("Powercharts").getChild("fps07").meta.visible = 0 self.parent.parent.getChild("Powercharts").getChild("fps08").meta.visible = 0 self.parent.parent.getChild("Powercharts").getChild("fps11").meta.visible = 0 self.parent.parent.getChild("Powercharts").getChild("fps12").meta.visible = 0 ``` The actual result of this is firstly when i launch the page the icons are black instead of the grey they should be and when i click one it will turn itself green but the rest will remain unchanged ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/f/effaa9af2816affdc5bfae2412187b54bfca2396.png) also once they turn green they do not change by clicking another icon its as if it reads the line saying turn green and ignores everything until the powerchart lines. In the designer it works exactly as expected which makes me think this is a bug? ---
**Author:** ![Dean\_Walsh](https://avatars.discourse-cdn.com/v4/letter/d/8797f3/32.png) [@Dean\_Walsh](https://forum.inductiveautomation.com/u/Dean_Walsh)\ **Post date:** [June 29, 2022, 11:30am UTC](https://forum.inductiveautomation.com/t/bug-script-changes-colours-correctly-in-designer-preview-but-not-on-web-page/61344/2 "2022-06-29T11:30:47Z")
For reference it is supposed to look like this, which i have taken from the designer preview mode ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/9/499d69e9118a794738e69c37fbec7d8028b74e24.png) ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [June 29, 2022, 12:05pm UTC](https://forum.inductiveautomation.com/t/bug-script-changes-colours-correctly-in-designer-preview-but-not-on-web-page/61344/3 "2022-06-29T12:05:48Z")
Your green color includes the `#`, the grey color does not. Generally when a color is not recognized it will default to black. These lines should be ```python self.parent.parent.getChild("FPS03").getChild("Icon").props.color = "#A5A5A5" ``` I would also strongly suggest using theme variables for your colors, as opposed to hard coding them. So if you ever decide to change them you will only need to change it in one place. Some more on that here: > [@Ignition Perspective symbol factory animation](https://forum.inductiveautomation.com/t/ignition-perspective-symbol-factory-animation/36119/15): > > You really should look into using a custom theme and css variables for all of your standard colours, as it provides far better standardisation than any other method (or than simply using magic colours). You can reference css variables and use them as component property values using: var(--VARIABLE\_NAME) This is an example of my custom style variable.css below. Mostly I reference these within Perspective Styles, however I also do reference some of the directly in component property values when… ---
**Author:** ![Dean\_Walsh](https://avatars.discourse-cdn.com/v4/letter/d/8797f3/32.png) [@Dean\_Walsh](https://forum.inductiveautomation.com/u/Dean_Walsh)\ **Post date:** [June 29, 2022, 12:08pm UTC](https://forum.inductiveautomation.com/t/bug-script-changes-colours-correctly-in-designer-preview-but-not-on-web-page/61344/4 "2022-06-29T12:08:10Z")
Thank you that fixed it and i will look into the themes ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 29, 2022, 1:09pm UTC](https://forum.inductiveautomation.com/t/bug-script-changes-colours-correctly-in-designer-preview-but-not-on-web-page/61344/5 "2022-06-29T13:09:11Z")
It looks like you might have 9 copies of this script on each radio button? It also seems like like you should be doing this using bindings on your components to set their colours and visibilities rather than using script(s) to set these. Unless I’m missing something? ---
**Author:** ![Dean\_Walsh](https://avatars.discourse-cdn.com/v4/letter/d/8797f3/32.png) [@Dean\_Walsh](https://forum.inductiveautomation.com/u/Dean_Walsh)\ **Post date:** [June 29, 2022, 1:12pm UTC](https://forum.inductiveautomation.com/t/bug-script-changes-colours-correctly-in-designer-preview-but-not-on-web-page/61344/6 "2022-06-29T13:12:31Z")
Well i just thought this would be easier im not sure what i would bind it to as im clicking an icon to change these properties and its mostly a copy and paste job i only had to change one or two characters each time. You are probably right though im sure this wasnt the most efficient method ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 29, 2022, 8:40pm UTC](https://forum.inductiveautomation.com/t/bug-script-changes-colours-correctly-in-designer-preview-but-not-on-web-page/61344/7 "2022-06-29T20:40:25Z")
If you wanted to keep the config for the session ie between page navigations, you could bind to session custom props. Because it’s a radio button I’d use a single integer prop. Otherwise you could use a view custom prop instead. I’d have a custom prop on each radio button to hold the number it corresponds to and then bind to an expression that compares this value to the value of the session prop, and colour accordingly. The action performed script would just set the session prop to its custom int value prop ---
**Author:** ![Dean\_Walsh](https://avatars.discourse-cdn.com/v4/letter/d/8797f3/32.png) [@Dean\_Walsh](https://forum.inductiveautomation.com/u/Dean_Walsh)\ **Post date:** [July 5, 2022, 10:49am UTC](https://forum.inductiveautomation.com/t/bug-script-changes-colours-correctly-in-designer-preview-but-not-on-web-page/61344/8 "2022-07-05T10:49:56Z")
Yes moving forward i used an approach more like this, made things more coherent ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [July 5, 2022, 11:35am UTC](https://forum.inductiveautomation.com/t/bug-script-changes-colours-correctly-in-designer-preview-but-not-on-web-page/61344/9 "2022-07-05T11:35:54Z")
> [@Dean\_Walsh](#): > > ... to indicate which one has been selected ... I see bad user interface there. You seem to be using radiobutton icons as checkboxes. This will be confusing. Radio buttons are interlocked so that only one can be on at any time. I recommend that you use a different icon or component. The Toggle Switch or Checkbox components seems appropriate. The Checkbox allows you to configure the icons and colors.