# Momentary toggle button

**URL:** https://discourse.nodered.org/t/momentary-toggle-button/62256
**Category:** Dashboard
**Tags:** function-node
**Created:** [5 May 2022 21:10 UTC](https://discourse.nodered.org/t/momentary-toggle-button/62256 "2022-05-05T21:10:51Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![alexander77](https://avatars.discourse-cdn.com/v4/letter/a/3ec8ea/32.png) [@alexander77](https://discourse.nodered.org/u/alexander77)
#### Post date: [5 May 2022 21:10 UTC](https://discourse.nodered.org/t/momentary-toggle-button/62256/1 "2022-05-05T21:10:51Z")

</div>

Hi,  
i found this flow here:  
[https://flows.nodered.org/flow/badf32e71913b09a2d8e2488a1b101a5](https://flows.nodered.org/flow/badf32e71913b09a2d8e2488a1b101a5)  
Great, a mouse-down and a mouse-up output, perfect for the needs of buttons to control a PTZ-Camera.

Works great with one button, but fails if i use 6 buttons (up, down, left, right, zoom+ and zoom-). In the case of 6 buttons, i see always more than one button triggert.

Wat is necessary to make these buttons work independent?

---

<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: [5 May 2022 22:25 UTC](https://discourse.nodered.org/t/momentary-toggle-button/62256/2 "2022-05-05T22:25:29Z")

</div>

Thats because they reference the same class "momentary ". try giving all \<div\>'s a different class, and changing the reference to momentary in the function to match the class.

Or you could just add all the buttons in one template, sending a payload "true/false" and a topic "up/down/left/right/zoom in/out".  
Than you can route with a switch on the topic.

```auto
[{"id":"4a193389.e055ac","type":"ui_template","z":"bf9e1e33.030598","group":"4ba5d415.d302ec","name":"Toggle Button","order":1,"width":"0","height":"0","format":"<div>\n <md-button ng-mousedown=\"send({payload: true, topic: 'up'})\" ng-mouseup=\"send({payload: false, topic: 'up'})\" style=\"width:100%; height:48px; margin: 0px\">up</md-button>\n <md-button ng-mousedown=\"send({payload: true, topic: 'down'})\" ng-mouseup=\"send({payload: false, topic: 'down'})\" style=\"width:100%; height:48px; margin: 0px\">down</md-button>\n</div>\n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":250,"y":80,"wires":[["fa34fe67.be89c"]]},{"id":"fa34fe67.be89c","type":"debug","z":"bf9e1e33.030598","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":430,"y":80,"wires":[]},{"id":"4ba5d415.d302ec","type":"ui_group","name":"Control","tab":"47f0556b.db072c","order":1,"disp":true,"width":"6","collapse":false},{"id":"47f0556b.db072c","type":"ui_tab","name":"ICM","icon":"dashboard"}]

```

---

<div class="post-metadata">

### Author: ![alexander77](https://avatars.discourse-cdn.com/v4/letter/a/3ec8ea/32.png) [@alexander77](https://discourse.nodered.org/u/alexander77)
#### Post date: [6 May 2022 00:29 UTC](https://discourse.nodered.org/t/momentary-toggle-button/62256/3 "2022-05-06T00:29:20Z")

</div>

Thank you, works perfect!

Edit: i gave the divs a different name and matched it in the scope as well.

---

<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: [20 May 2022 00:29 UTC](https://discourse.nodered.org/t/momentary-toggle-button/62256/4 "2022-05-20T00:29:53Z")

</div>

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