# Change the fill color of a svg element in ui-svg node when you click on it
**URL:** https://discourse.nodered.org/t/change-the-fill-color-of-a-svg-element-in-ui-svg-node-when-you-click-on-it/53187
**Category:** Dashboard
**Created:** [3 November 2021 20:11 UTC](https://discourse.nodered.org/t/change-the-fill-color-of-a-svg-element-in-ui-svg-node-when-you-click-on-it/53187 "2021-11-03T20:11:24Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@NoviceUser](https://discourse.nodered.org/u/NoviceUser)
#### Post date: [3 November 2021 20:11 UTC](https://discourse.nodered.org/t/change-the-fill-color-of-a-svg-element-in-ui-svg-node-when-you-click-on-it/53187/1 "2021-11-03T20:11:24Z")
Hello,
I am new to node-red and was having trouble using the node called node-red-contrib-ui-svg, I have created three buttons when pressed I would like to change to green, indicating it's on and then if it's pressed again it would turn red indicating it's off. I have managed to change the state of the button once but was unable to change the state again.
Thank you for your help!
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [3 November 2021 22:49 UTC](https://discourse.nodered.org/t/change-the-fill-color-of-a-svg-element-in-ui-svg-node-when-you-click-on-it/53187/2 "2021-11-03T22:49:47Z")
Hi @NoviceUser,
It is easier for us if you export your flow and [share](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506) it with us. Of course a simplified version, only containing the relevant stuff...
I am not sure why you use `onclick == true`?
Your code snippet will be triggered when the button is clicked, so you know that it is clicked. Otherwise you wouldn't arrive at this code...
Here is an example that changes color (between red and green) every time you click it:
```auto
[{"id":"795769ff.1d2ab8","type":"ui_svg_graphics","z":"4a680cc36387c937","group":"8d3148e0.0eee88","order":2,"width":"24","height":"14","svgString":"","clickableShapes":[],"javascriptHandlers":[{"selector":"#mycircle","action":"click","sourceCode":"if ($(this).attr(\"fill\") == \"red\") {\n $(this).attr(\"fill\", \"green\");\n}\nelse {\n $(this).attr(\"fill\", \"red\");\n}"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":true,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit !important;\n}","name":"","x":980,"y":860,"wires":[[]]},{"id":"8d3148e0.0eee88","type":"ui_group","name":"7Shield","tab":"9cdb817b.45e12","order":1,"disp":false,"width":"24","collapse":false,"className":""},{"id":"9cdb817b.45e12","type":"ui_tab","name":"Energy","icon":"dashboard","order":41,"disabled":false,"hidden":false}]
```
Bart
---
### Author:  [@NoviceUser](https://discourse.nodered.org/u/NoviceUser)
#### Post date: [4 November 2021 12:43 UTC](https://discourse.nodered.org/t/change-the-fill-color-of-a-svg-element-in-ui-svg-node-when-you-click-on-it/53187/3 "2021-11-04T12:43:16Z")
Hello @BartButenaers,
Thank you for your reply. I was trying to make the image of the button a boolean, so when clicked it gives a 1 then turns green and when clicked again it gives a 0 then turns red.
There are alot of restrictions on new users that prevent me from sharing my json. I have attached a google drive link to the json file. Thank you again for your help!
> **[flows (10).json](https://drive.google.com/file/d/1sSV17cMZul5n37iD7gRgoqeTdVfOC5SZ/view?usp=sharing)**
>
> Google Drive file.
NoviceUser
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [4 November 2021 18:45 UTC](https://discourse.nodered.org/t/change-the-fill-color-of-a-svg-element-in-ui-svg-node-when-you-click-on-it/53187/4 "2021-11-04T18:45:29Z")
@NoviceUser,
You can you please try this updated flow:
```auto
[{"id":"3bb18076c36e50b5","type":"debug","z":"b6c46bbc8cfc81cb","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":860,"y":160,"wires":[]},{"id":"41c94798ebea186c","type":"ui_svg_graphics","z":"b6c46bbc8cfc81cb","group":"c20e25fb6de0c5b9","order":1,"width":0,"height":0,"svgString":"","clickableShapes":[],"javascriptHandlers":[{"selector":"#button1","action":"click","sourceCode":"if (this.style.fill == \"rgb(69, 255, 1)\") {\n $scope.send({payload: 1, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(255, 0, 0)\";\n}\nelse {\n $scope.send({payload: 0, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(69, 255, 1)\";\n}"},{"selector":"#button2","action":"click","sourceCode":"if (this.style.fill == \"rgb(69, 255, 1)\") {\n $scope.send({payload: 1, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(255, 0, 0)\";\n}\nelse {\n $scope.send({payload: 0, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(69, 255, 1)\";\n}"},{"selector":"#button3","action":"click","sourceCode":"if (this.style.fill == \"rgb(69, 255, 1)\") {\n $scope.send({payload: 1, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(255, 0, 0)\";\n}\nelse {\n $scope.send({payload: 0, topic: \"BUTTON_3\"});\n this.style.fill = \"rgb(69, 255, 1)\";\n}"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":true,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit !important;\n}","name":"","x":680,"y":160,"wires":[["3bb18076c36e50b5"]]},{"id":"c20e25fb6de0c5b9","type":"ui_group","name":"Racking Remote","tab":"a28ff08f.3a822","order":1,"disp":true,"width":"30","collapse":false,"className":""},{"id":"a28ff08f.3a822","type":"ui_tab","name":"SVG","icon":"dashboard","order":38,"disabled":false,"hidden":false}]
```
Note that you might have to update the rgb colors, to fit your needs.
I have also added a topic to the output messages, so you know afterwards which message belongs to which button.
---
### Author:  [@NoviceUser](https://discourse.nodered.org/u/NoviceUser)
#### Post date: [4 November 2021 20:57 UTC](https://discourse.nodered.org/t/change-the-fill-color-of-a-svg-element-in-ui-svg-node-when-you-click-on-it/53187/5 "2021-11-04T20:57:24Z")
Hello @BartButenaers,
I really appreciate your help, it's great! thank you!
I had a couple of questions, If I were to inject a payload containing the number 1, would the button turn green or if I injected a 0 would it turn red? Do you by chance know how to make the svg dashboard responsive?
Thank you again for your help!
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [4 November 2021 21:13 UTC](https://discourse.nodered.org/t/change-the-fill-color-of-a-svg-element-in-ui-svg-node-when-you-click-on-it/53187/6 "2021-11-04T21:13:12Z")