Property ‘value’ does not exist on type HTMLElement – How to fix it?

Posted on by Nathaniel Kirk
Property ‘value’ does not exist on type HTMLElement

If you want to find the solution for the error “Property ‘value’ does not exist on type HTMLElement”, this whole article is what you are looking for to solve it. Read on it now.

HTML element

In web pages, usually, anything can be considered an element.

An HTMLelement is typically defined based on three elements:

  • Open card
  • The content inside the tag pair (also known as the element’s content)
  • Closed card

Code:

<h1>LearnShareIT 1</h1>
<p>LearnShareIT 2</p>
<div>LearnShareIT 3</div>

HTML tags can be nested within each other. Thus, the content of an HTML element can be one or more other HTML elements.

For example, we have a piece of code like this:

Code:

<html>
    <body>
        <h1>LearnShareIT Heading</h1>
        <p>LearnShareIT Paragraph</p>
    </body>
</html>

In the first HTML element, its content is an HTML element with the opening tag <body>.

In the second HTML element, its content are two HTML elements with opening tags <h1> and <p>.

The cause of this error

This error occurs when the HTML element is not set before the value, so an error will appear when compiling. Here is a specific example of the above error:

Code:

<html>
    <head>
    </head>
    <body>
        <p id="welcome_to"></p>
        <form>
            <input 
              id="name" 
              type="text" 
              name="name" 
              value="" 
              onkeyup="welcome('welcome_to')" 
            />
        </form>
    </body>
    <script src="LearnShareIT.js"></script>
</html>

And below is the typescript file named “LearnShareIT.ts” of the program.

Code:

function welcome(name) {
    return "Welcome to LearnShareIT, " + name;
}

function welcome(id) {
    var nameValue = document.getElementById(id).value;

    if (nameValue.trim() == "")
        nameValue = "Sir";

    document.getElementById("welcome_to").innerText = greeter(nameValue);
}

Output:

Property 'value' does not exist on type HTMLElement

In the following sections, we will show you several ways to fix the above error.

How to solve the error “Property ‘value’ does not exist on type HTMLElement”?

Use the “as” operator

In this approach, we will use the as operator and define the element we point to with the correct HTML element to get the element’s value.

Code:

function welcome(name) {
    return "Welcome to LearnShareIT, " + name;
}

function welcome(id) {
    var nameValue= (document.getElementById(id) as HTMLInputElement).value;

    if (nameValue.trim() == "")
        nameValue = "Sir";

    document.getElementById("welcome_to").innerText = greeter(nameValue);
}

When we define it as above, even though the value in the original HTML is set to null, we don’t get the same error as before when we point it in the TypeScript.

Use [ ] to select the attribute

We can use the [] method to get the exact attribute value. Check out the example below to learn more about this.

Code:

function welcome(name) {
    return "Welcome to LearnShareIT, " + name;
}

function welcome(id) {
 	var nameValue = document.getElementById(id)["value"];

    if (nameValue.trim() == "")
        nameValue = "Sir";

    document.getElementById("welcome_to").innerText = greeter(nameValue);
}

By doing the above, we can find out the value of the HTML element we are looking for and will avoid the error.

Summary

In this article, I have provided you the solution to the error “Property ‘value’ does not exist on type HTMLElement”. Try applying it to your program to get the result. Thanks for your reading!

Maybe you are interested:

Related Posts

Leave a Reply

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