I would like to trigger a click event on a HTML element in Typescript/Reactjs.
let element: Element = document.getElementsByClassName('btn')[0]; element.click();
The code above does work. But I'm getting a Typescript error:
ERROR in [at-loader] ./src/App.tsx:124:17 TS2339: Property 'click' does not exist on type 'Element'.
So what would be the correct way to do this?
The HTMLElement. click() method simulates a mouse click on an element. When click() is used with supported elements (such as an <input> ), it fires the element's click event. This event then bubbles up to elements higher in the document tree (or event chain) and fires their click events.
JS code: document. getElementById('mat-checkbox-1-input'). click();
The error "Property 'X' does not exist on type 'HTMLElement'" occurs when we try to access a property that doesn't exist on an element of type HTMLElement . To solve the error, use a type assertion to type the element correctly before accessing the property.
Use the type HTMLElement instead of Element. HTMLElement inherits from Element. And in the documentation you can find that click
function is defined in the HTMLElement.
Cast your element into the HTMLElement via
let element: HTMLElement = document.getElementsByClassName('btn')[0] as HTMLElement; element.click();
Correct (type safe) way is:
if (element instanceof HTMLElement) { element.click(); }
You shouldn't use forced casts (as suggested by other answers) unless you really need them.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With