Property ‘click’ does not exist on type ‘Element’ in TypeScript – How to fix it?

Property 'click' does not exist on type 'Element' in TypeScript

Knowing how to solve the error “property ‘click’ does not exist on type ‘Element’” in Typescript will help you know more clearly about working with HTML elements. So how to do it? Let’s go into detail now.

The reason for the error “property ‘click’ does not exist on type ‘Element’” in Typescript

The error happened because I tried to use the ‘click()’ method on an element having a type is ‘Element’ that does not allow in Typescript

Example of how the error happens: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="./index.css" />
    </head>
    <body>
        <button class="btn">Click to change text</button>
        <button class="btn">Click to style text</button>
        <button class="btn">Click to Update</button>
        <button class="btn">Click to submit</button>
        <script src="./index.js"></script>
    </body>
</html>
const buttonEle = document.getElementsByClassName("btn")[0];

// Create a function to change the background color of the button when i clicked
buttonEle.onclick = (e) => {
    buttonEle.style.backgroundColor = "black";

    // Button auto turn green after 1000 millisecond
    setTimeout(() => {
        buttonEle.style.backgroundColor = "green";
    }, 1000);

};

// Click the button
buttonEle.click();

 Output:

The app did not get crash, but some methods won’t work, and it can lead to some terrible problems.

The error:

index.ts:3:7 - error TS2339: Property 'click' does not exist on type 'Element'.
3 h1Ele.click();
        ~~~~~

The solution for this error

Type assertion by using ‘as’ syntax

To solve this error, you can use type assertion by using ‘as’ syntax to set the button element type to HTMLElement. And the click function exists in the HTMLElement.

Example:

const buttonEle = document.getElementsByClassName("btn")[0] as HTMLElement;

// Create a function to change the background color of the button when clicking
buttonEle.onclick = (e) => {
    buttonEle.style.backgroundColor = "black";

    // Button auto turn green after 1000 millisecond
    setTimeout(() => {
        buttonEle.style.backgroundColor = "green";
    }, 1000);

};

// Click the button
buttonEle.click();

Output:

As you see here, when I reload the app, my button turns black. It means the button clicked, then after 1 second tt went back to green.

Or, if you want to go get all array HTMLCollection, you can set the type like this:

const buttonElements = document.getElementsByClassName('btn') as HTMLCollectionOf<HTMLElement>

Here I mean it is an HTMLCollection array with an element is HTMLElement. Then you can access each element by passing the index inside the square bracket.

Example:

buttonElements[1].click()

Summary

In this article, I showed you how to solve the error “Property ‘click’ does not exist on type ‘Element’” in Typescript. You can use type assertion and then set it to HTMLElement, which has the click() property. Hope it is helpful to you.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *