onClick( )

Adds an event handler that runs when the element is clicked.


An element receives a click event when a user clicks on the element and releases.

When a user double-clicks an element, two click events are fired.

You can also define an event handler using the Properties and Events panel.

Properties and Events panel

This will automatically add the required code for the selected element and event:

export function button1_click(event) {
// This function was added from the Properties & Events panel. To learn more, visit
// Add your code for this event here:
javascript | Copy Code

Note: Do not use the Editor Link panel to redirect on click when a link is already defined using the onClick() function. To avoid unpredictable behavior, remove the link from the Editor Link panel.


function onClick(handler: MouseEventHandler): Element
handler: function MouseEventHandler(event: MouseEvent): void

onClick Parameters


The name of the function or the function expression to run when the element is clicked.


The element to which the event handler was added.

Return Type:

MouseEventHandler Parameters


The mouse event that occurred.


This function does not return anything.

Return Type:


Was this helpful?

Get the ID of the element that was clicked

Copy Code
1$w("#myButton").onClick( (event) => {
2 let targetId =; // "myButton"
3 } );
Get a mouse click's coordinates

Copy Code
1$w("#myButton").onClick( (event) => {
2 let clientX = event.clientX; // 362
3 let clientY = event.clientY; // 244
4 let offsetX = event.offsetX; // 10
5 let offsetY = event.offsetY; // 12
6 let pageX = event.pageX; // 362
7 let pageY = event.pageY; // 376
8 let screenX = event.screenX; // 3897
9 let screenY = event.screenY; // 362
10 } );
Change the background color of the element that was clicked

Copy Code
1$w('#myButton').onClick((event) => {
2 const clickedElement =;
3 = 'blue';
4 });