# Updating Button Color ON Click Event

**URL:** <https://forum.inductiveautomation.com/t/updating-button-color-on-click-event/72662>\
**Category:** Ignition\
**Tags:** ignition81, perspective, scripting\
**Created:** [April 19, 2023, 5:51pm UTC](https://forum.inductiveautomation.com/t/updating-button-color-on-click-event/72662 "2023-04-19T17:51:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Javontez\_Robinson](https://avatars.discourse-cdn.com/v4/letter/j/5f9b8f/32.png) [@Javontez\_Robinson](https://forum.inductiveautomation.com/u/Javontez_Robinson)\
**Post date:** [April 19, 2023, 5:51pm UTC](https://forum.inductiveautomation.com/t/updating-button-color-on-click-event/72662/1 "2023-04-19T17:51:37Z")

</div>

How can I script an On Click event to change the color of the button I clicked?

---

<div class="post-metadata">

**Author:** ![bkarabinchak.psi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bkarabinchak.psi/32/83567_2.png) [@bkarabinchak.psi](https://forum.inductiveautomation.com/u/bkarabinchak.psi)\
**Post date:** [April 19, 2023, 6:08pm UTC](https://forum.inductiveautomation.com/t/updating-button-color-on-click-event/72662/2 "2023-04-19T18:08:12Z")

</div>

The button they are clicking should change color after they click it? Is there anything wrong with the onAction event of the button itself?

---

<div class="post-metadata">

**Author:** ![Javontez\_Robinson](https://avatars.discourse-cdn.com/v4/letter/j/5f9b8f/32.png) [@Javontez\_Robinson](https://forum.inductiveautomation.com/u/Javontez_Robinson)\
**Post date:** [April 19, 2023, 6:18pm UTC](https://forum.inductiveautomation.com/t/updating-button-color-on-click-event/72662/3 "2023-04-19T18:18:56Z")

</div>

No, I am have trouble setting up a the script to get this done. I chose a on mouse click event.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [April 19, 2023, 6:20pm UTC](https://forum.inductiveautomation.com/t/updating-button-color-on-click-event/72662/4 "2023-04-19T18:20:13Z")

</div>

What do you have so far?

---

<div class="post-metadata">

**Author:** ![Javontez\_Robinson](https://avatars.discourse-cdn.com/v4/letter/j/5f9b8f/32.png) [@Javontez\_Robinson](https://forum.inductiveautomation.com/u/Javontez_Robinson)\
**Post date:** [April 19, 2023, 7:15pm UTC](https://forum.inductiveautomation.com/t/updating-button-color-on-click-event/72662/5 "2023-04-19T19:15:54Z")

</div>

def runAction(self, event):

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [April 19, 2023, 8:01pm UTC](https://forum.inductiveautomation.com/t/updating-button-color-on-click-event/72662/6 "2023-04-19T20:01:44Z")

</div>

```auto
def runAction(self, event):
	self.props.style.backgroundColor = "#FF0000"

```

But note that this only changes it to the color you declare and never changes it back; subsequent clicks will have no effect.

---

<div class="post-metadata">

**Author:** ![Andy\_Jagnarain](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@Andy\_Jagnarain](https://forum.inductiveautomation.com/u/Andy_Jagnarain)\
**Post date:** [November 20, 2024, 3:53pm UTC](https://forum.inductiveautomation.com/t/updating-button-color-on-click-event/72662/7 "2024-11-20T15:53:05Z")

</div>

new with ignition. any idea on how to have the button switch back color if click again?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [November 20, 2024, 4:12pm UTC](https://forum.inductiveautomation.com/t/updating-button-color-on-click-event/72662/8 "2024-11-20T16:12:42Z")

</div>

There are lots of ways, but the common strategy is going to be to store the swap color in some prop somewhere. Then, you can either swap between the two colors, determine which color to display based on a click count, or use the current color to determine the next color.

```python
def runAction(self, event):
    custom_color = "#FF0000"
    if self.props.style.backgroundColor == custom_color:
        # assuming you've stored the default color in a custom prop named `defaultColor`
	    self.props.style.backgroundColor = self.custom.defaultColor
    else:
        self.props.style.backgroundColor = custom_color

```

Using a click count:

```python
def runAction(self, event):
    self.custom.clickCount += 1
    self.props.style.backgroundColor = self.custom.defaultColor if self.custom.clickCount % 2 == 0 else "#FF0000"

```

Mapping:

```python
def runAction(self, event):
    color_map = {
        self.custom.defaultColor: "#FF0000",
        "#FF0000": self.custom.defaultColor
    }
	self.props.style.backgroundColor = color_map.get(self.props.style.backgroundColor, self.custom.defaultColor)

```