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:
- Get the value of an input element using TypeScript
- Check if an element contains a class using typescript
- To create an HTML element using TypeScript
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm