# HTML Events: How To Trigger a Node-Red Message?

**URL:** <https://discourse.nodered.org/t/html-events-how-to-trigger-a-node-red-message/65824>\
**Category:** General\
**Created:** [30 July 2022 19:08 UTC](https://discourse.nodered.org/t/html-events-how-to-trigger-a-node-red-message/65824 "2022-07-30T19:08:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\
**Post date:** [30 July 2022 19:08 UTC](https://discourse.nodered.org/t/html-events-how-to-trigger-a-node-red-message/65824/1 "2022-07-30T19:08:25Z")

</div>

I am a HTML / Node-Red beginner. I want to learn how to use HTML events in the Node-Red Template node, and use that to trigger Node-Red messages via the Template nodes.

I built a HTML blue box, when clicked, will alert. It works in my Node-Red Dashboard, using the Template and Template-ui nodes:

 ![Screen Shot 2022-07-30 at 2.42.54 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1addf17f6a1c6cd577bad27d40009b78624a74aa.png)

Question: How do I code the HTML "on click" element listener, to send a Node-Red message, from the Template-ui Node?

I found an example using Angular, "ng-change="send(msg)", but is there a pure HTML way to do it?

Here is my simple HTML:

```auto
<style>
#box{
    width: 200px;
    height: 200px;
    background: blue;
}
</style>
<div id = "box" > </div>
<script>
    const BoxDiv = document.getElementById("box");

    function boxClick(e) { alert("Test of the Click"); msg.payload = "test" }

    BoxDiv.addEventListener("click", boxClick )

</script>

```

And, here is my "test" flow:

```auto
[
    {
        "id": "609696582c501145",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "a557a7895dbe03e7",
        "type": "template",
        "z": "609696582c501145",
        "name": "",
        "field": "template",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "plain",
        "template": "\n\n<style>\n\n#box{\n\n width: 200px;\n height: 200px;\n background: blue;\n}\n\n\n</style>\n\n<div id = \"box\" > </div>\n\n\n<script>\n\n const BoxDiv = document.getElementById(\"box\");\n\n function boxClick(e) { alert(\"Test of the Click\"); msg.payload = \"test\" }\n\n BoxDiv.addEventListener(\"click\", boxClick )\n\n\n</script>\n\n",
        "output": "str",
        "x": 340,
        "y": 220,
        "wires": [
            [
                "e43fd34ea3238e96"
            ]
        ]
    },
    {
        "id": "e43fd34ea3238e96",
        "type": "ui_template",
        "z": "609696582c501145",
        "group": "68aac522c027a8e4",
        "name": "",
        "order": 9,
        "width": "9",
        "height": "4",
        "format": "",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 520,
        "y": 220,
        "wires": [
            [
                "a2e6ad903ba776e9"
            ]
        ]
    },
    {
        "id": "3f7e823af33770a4",
        "type": "inject",
        "z": "609696582c501145",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 180,
        "y": 220,
        "wires": [
            [
                "a557a7895dbe03e7"
            ]
        ]
    },
    {
        "id": "a2e6ad903ba776e9",
        "type": "debug",
        "z": "609696582c501145",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 720,
        "y": 220,
        "wires": []
    },
    {
        "id": "68aac522c027a8e4",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "911a0d7d34b66434",
        "order": 1,
        "disp": true,
        "width": "15",
        "collapse": false,
        "className": ""
    },
    {
        "id": "911a0d7d34b66434",
        "type": "ui_tab",
        "name": "HTML",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

Alan

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [31 July 2022 05:58 UTC](https://discourse.nodered.org/t/html-events-how-to-trigger-a-node-red-message/65824/2 "2022-07-31T05:58:51Z")

</div>

The dashboard is AngularJS Material ([https://material.angularjs.org/latest/](https://material.angularjs.org/latest/)) so it's better to use it's functionalities. It's sometimes even easier as the flow below:

```auto
[
    {
        "id": "609696582c501145",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "e43fd34ea3238e96",
        "type": "ui_template",
        "z": "609696582c501145",
        "group": "68aac522c027a8e4",
        "name": "",
        "order": 9,
        "width": "9",
        "height": "4",
        "format": "<style>\n\n#box{\n\n width: 200px;\n height: 200px;\n background: blue;\n}\n\n\n</style>\n\n<div id = \"box\" ng-click=\"clickSend($event)\"> </div>\n\n\n<script>\n \n scope.clickSend = function(evt){\n alert(\"Test of the Click\");\n console.log(evt);\n this.send({payload:\"test\"});\n }\n\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 440,
        "y": 220,
        "wires": [
            [
                "a2e6ad903ba776e9"
            ]
        ]
    },
    {
        "id": "a2e6ad903ba776e9",
        "type": "debug",
        "z": "609696582c501145",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 720,
        "y": 220,
        "wires": []
    },
    {
        "id": "68aac522c027a8e4",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "911a0d7d34b66434",
        "order": 1,
        "disp": true,
        "width": "15",
        "collapse": false,
        "className": ""
    },
    {
        "id": "911a0d7d34b66434",
        "type": "ui_tab",
        "name": "HTML",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![n61ab](https://avatars.discourse-cdn.com/v4/letter/n/cc9497/32.png) [@n61ab](https://discourse.nodered.org/u/n61ab)\
**Post date:** [31 July 2022 10:23 UTC](https://discourse.nodered.org/t/html-events-how-to-trigger-a-node-red-message/65824/3 "2022-07-31T10:23:48Z")

</div>

Thanks, knoepsche

A followup question please.

I see you are using a J Query to find the element "event",

Where is the element "event"? Is "event" an element in the event object, or is it the full event object?

I did look at the console.log, which returns the parameter, "evt", for the event object, but could not find it.

Alan

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [31 July 2022 19:15 UTC](https://discourse.nodered.org/t/html-events-how-to-trigger-a-node-red-message/65824/4 "2022-07-31T19:15:15Z")

</div>

$event should own the browsers event objekt.

[https://www.w3schools.com/angular/angular\_events.asp](https://www.w3schools.com/angular/angular_events.asp)

---

<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:** [14 August 2022 19:15 UTC](https://discourse.nodered.org/t/html-events-how-to-trigger-a-node-red-message/65824/5 "2022-08-14T19:15:17Z")

</div>

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