# How to dynamically set HTML attribute value using UI template mustache syntax?

**URL:** <https://discourse.nodered.org/t/how-to-dynamically-set-html-attribute-value-using-ui-template-mustache-syntax/37860>\
**Category:** Dashboard\
**Created:** [22 December 2020 01:10 UTC](https://discourse.nodered.org/t/how-to-dynamically-set-html-attribute-value-using-ui-template-mustache-syntax/37860 "2020-12-22T01:10:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Herold](https://avatars.discourse-cdn.com/v4/letter/h/edb3f5/32.png) [@Herold](https://discourse.nodered.org/u/Herold)\
**Post date:** [22 December 2020 01:10 UTC](https://discourse.nodered.org/t/how-to-dynamically-set-html-attribute-value-using-ui-template-mustache-syntax/37860/1 "2020-12-22T01:10:15Z")

</div>

I've tried to set dynamically UI template button onclick attribute value using mustache syntax (myfunction is intended to be executed in browser). I've got parse syntax error, any hints ?  
Thank's

**Function node:**

```auto
msg.my_onclickfunction = "myfunction()";
or
msg.my_onclickfunction = "\"myfunction()\"";
return msg;

```

**UI Template node (HTML):**

```auto
`<button id="myid" class="myclass" onclick={{msg.my_onclickfunction}}></button>`
```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 December 2020 06:52 UTC](https://discourse.nodered.org/t/how-to-dynamically-set-html-attribute-value-using-ui-template-mustache-syntax/37860/2 "2020-12-22T06:52:42Z")

</div>

Try...

`msg.my_onclickfunction = "myfunction()";`

And

`onclick="{{{msg.my_onclickfunction}}}"`

Then use browser Devtools to inspect.

Ps: no idea if it will actually work.

What are you trying to achieve? What is the end goal?

---

<div class="post-metadata">

**Author:** ![Herold](https://avatars.discourse-cdn.com/v4/letter/h/edb3f5/32.png) [@Herold](https://discourse.nodered.org/u/Herold)\
**Post date:** [22 December 2020 16:01 UTC](https://discourse.nodered.org/t/how-to-dynamically-set-html-attribute-value-using-ui-template-mustache-syntax/37860/3 "2020-12-22T16:01:38Z")

</div>

Thank's Steve, unfotunately no joy ...

**Function node**  
` msg.my_onclickfunction = "myfunction()";`

**UI template node**  
i've got parse error with Devtools on:  
`<button onclick="{{{msg.my_onclickfunction}}}"></button>`

```auto
Error: $parse:syntax
Syntax Error
Syntax Error: Token '.' is unexpected, expecting [}] at column 5 of the expression [{msg.my_onclickfunction] starting at [.my_onclickfunction].

```

and compile error on alternative:  
`<button onclick={{msg.my_onclickfunction}}></button>`

```auto
Error: $compile:nodomevents
Event Attribute/Property Binding
Interpolations for HTML DOM event attributes are disallowed

```

My goal is mainly to factorize UI templates (calling external javascript and css static ressources in browser) using only a subflow vs several statics ui templates.

However  
**Function node**  
`msg.my_color = "color: green";`  
**UI template node**  
`<p style={{msg.my_color}}>my text</p>`  
OK and also  
**Function node**  
`msg.my_id = "test";`  
**UI template node**  
`<button id={{msg.my_id}}></button>`  
is OK too !

i'm quite a newbie with node and vue but very impressed on NR capabilities. Any workaround to bind DOM events ?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 December 2020 16:43 UTC](https://discourse.nodered.org/t/how-to-dynamically-set-html-attribute-value-using-ui-template-mustache-syntax/37860/4 "2020-12-22T16:43:18Z")

</div>

> [@Herold](#):
>
> using only a subflow

If you are doing what I am thinking, there are issues putting UI nodes in a subflow (I forget what - but it doesnt work as expected)

> [@Herold](#):
>
> My goal is mainly to factorize UI templates

Perhaps this is of some help - something i did some time back...

> [@Adding \`output\` function to buttons designed in \`template\` node](https://discourse.nodered.org/t/adding-output-function-to-buttons-designed-in-template-node/25591/54):
>
> Andrew, some home work for you tomorrow... I have updated the code to also handle repeat buttons - try to implement them. PS, backup your flows first smiley Dont worry, the idea is exactly the same (add some attributes to a button then magic happens automatically) Visual Demo note... holding VOL buttons sends repeat messages the lock button is font awesome (the rest are material design) The flow [{"id":"f4fac1e9.e93e4","type":"ui\_template","z":"e1dfad68.fee2a","group":"be17…

there are lots of hint and clues in there that might prove useful (like moving away from directly specifying colours - using classes instead, etc)

> [@Herold](#):
>
> i've got parse error with Devtools on:  
> `<button onclick="{{{msg.my_onclickfunction}}}"></button>`

That shouldn't even get through to the browser. Share your code if you want someone to look closer.

---

<div class="post-metadata">

**Author:** ![Herold](https://avatars.discourse-cdn.com/v4/letter/h/edb3f5/32.png) [@Herold](https://discourse.nodered.org/u/Herold)\
**Post date:** [22 December 2020 21:22 UTC](https://discourse.nodered.org/t/how-to-dynamically-set-html-attribute-value-using-ui-template-mustache-syntax/37860/5 "2020-12-22T21:22:30Z")

</div>

Steve, i will look at your UI button management examples.  
Difficult for me to share code now but i will try to clean it from "private" elements (logins, url's etc ..) and post here.

My current code (web radio player with metadata and covers) is quite functional for my use. I'm trying to factorize to enhance "maintenability". Thank's again for you help, i've a lot to learn.

PS: Also interested in Monaco editor 🙂