You accessed the ‘value’ property of HTMLElement then TypeScript returned an error message: ‘The property ‘value’ does not exist on type ‘HTMLElement’. So why did it happen, and how can we fix it? You can find the answer in this article.
The cause of the error
Trying to access the ‘value’ property of an element that type is ‘HTMLElement’ and expect to get the value of that element. However, TypeScript returns an error message like this:
ERR: "Property 'value' does not exist on type 'HTMLElement'"This problem occurs because the ‘value’ property does not exist in ‘HTMLElement’ type.
Let’s take a look at the example below:
Here is your ‘infor.html’ file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<input id="jobTitle" type="text" value="Job position"/>
<input id="contact" type="text" value="Email or Phonenumber"/>
<button id="btn">Submit</button>
<script src="./src/index.ts"></script>
</body>
</html>Suppose we access the ’value’ property with the following statements in ‘index.ts’:
index.ts:
const jobTitle = document.getElementById('jobTitle');
const contact = document.getElementById('contact');
console.log(jobTitle.value)
console.log(contact.value)Error message:
ERR: "Property 'value' does not exist on type 'HTMLElement'"
ERR: "Property 'value' does not exist on type 'HTMLElement'"Of course, we get errors message because these commands are not valid.
Solutions to fix “Property ‘value’ does not exist on type ‘HTMLElement’” error in TypeScript
So the question is, how do we get the value of that element?
To fix this problem we use type casting that cast ‘HTMLElement’ to ‘HTMLInputElement’.
Edit your ‘index.ts’ as follows:
index.ts:
const jobTitle = document.getElementById('jobTitle') as HTMLInputElement;
const contact = document.getElementById('contact') as HTMLInputElement;
console.log(jobTitle.value)
console.log(contact.value)Output:
Job position
Email or PhonenumberHere you can see the output is the values we need just by using the as keyword to make a simple command.
You can also use the <> operator to get the same result as above. For example:
const jobTitle = (document.getElementById('jobTitle')).value;
const contact = (document.getElementById('contact')).value;
console.log(jobTitle.value)
console.log(contact.value)Output:
Job position
Email or PhonenumberIn addition, you should use conditional statements to ensure your element is not null before access to its property.
const jobTitle = (<htmlinputelement>document.getElementById('jobTitle')).value;
const contact = (<htmlinputelement>document.getElementById('contact')).value;
const nickname = (<htmlinputelement>document.getElementById('nickname')).value;
let myInputs = [jobTitle, contact, nickname]
for (var inp of myInputs) {
if (inp != null) {
console.log(inp)
}
}
console.log(jobTitle.value)
console.log(contact.value)Output:
Job position
Email or Phonenumber*Explain: The ‘nickname’ element returns a null value due to no element with id as ‘nickname’. So we only have two output values.
Summary
You can use either <> operator or as keyword to cast the ‘HTMLElement’ type to ‘HTMLInputElement’ type then access the property ‘value’. This method will have you solve the “Property ‘value’ does not exist on type ‘HTMLElement'” error in TypeScript easily.
Maybe you are interested:
- Property does not exist on type ‘never’ in TypeScript
- Property ‘flatMap’, ‘flat’ does not exist on type in TS
My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js
