# \<button\> in 'ui template

**URL:** <https://discourse.nodered.org/t/button-in-ui-template/85601>\
**Category:** Dashboard\
**Created:** [16 February 2024 19:47 UTC](https://discourse.nodered.org/t/button-in-ui-template/85601 "2024-02-16T19:47:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pawel2420](https://avatars.discourse-cdn.com/v4/letter/p/c57346/32.png) [@Pawel2420](https://discourse.nodered.org/u/Pawel2420)\
**Post date:** [16 February 2024 19:47 UTC](https://discourse.nodered.org/t/button-in-ui-template/85601/1 "2024-02-16T19:47:31Z")

</div>

I'm using Node-Red 3.1.3. I put the following code in ui\_template:

```auto
<script>
    function myFunction(mac) {console.log("button click: "+mac); }
</script>

<div ng-repeat="element in msg.payload">
<button onclick="myFunction({{element.mac}})"> </button>
</div>

```

This causes 'Error: [$compile:nodomevents]'  
I also tried the code:

```auto
onclick="myFunction('{{element.mac}}')"
onclick="myFunction(element.mac)"

```

Code from ng-click does not respond to click:  
`ng-click="myFunction('abc')"`

Only this code works:  
`onclick="myFunction('abc')"`

How to properly handle clicking on dynamically created buttons ?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [16 February 2024 20:10 UTC](https://discourse.nodered.org/t/button-in-ui-template/85601/2 "2024-02-16T20:10:47Z")

</div>

This topic may shed some light [HTML Template - use msg.payload](https://discourse.nodered.org/t/html-template-use-msg-payload/85557)  
The third example in the ui-template sidebar help text shows how to add the function to the scope.

---

<div class="post-metadata">

**Author:** ![Pawel2420](https://avatars.discourse-cdn.com/v4/letter/p/c57346/32.png) [@Pawel2420](https://discourse.nodered.org/u/Pawel2420)\
**Post date:** [16 February 2024 21:19 UTC](https://discourse.nodered.org/t/button-in-ui-template/85601/3 "2024-02-16T21:19:12Z")

</div>

In ui\_tempate, HTML elements such as a button are dynamically created when a message is received. The third example generates a "[ngRepeat:dupes]" error. It only appears once when I click the newly created button.  
Solution [HTML Template - use msg.payload](https://discourse.nodered.org/t/html-template-use-msg-payload/85557) works OK.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [17 March 2024 21:19 UTC](https://discourse.nodered.org/t/button-in-ui-template/85601/4 "2024-03-17T21:19:27Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.