The property value does not exist on value of type HTMLElement

Question

I am playing around with typescript and am trying to create a script that will update a p-element as text is inputted in a input box   The html looks as following    lt html gt       lt head gt       lt  head gt       lt body gt           lt p id  greet  gt  lt  p gt           lt form gt               lt input id  name  type  text  name  name  value    onkeyup  greet  name      gt           lt  form gt       lt  body gt       lt script src  greeter js  gt  lt  script gt   lt  html gt    And the greeter ts file   function greeter person        return  Hello      person     function greet elementId        var inputValue   document getElementById elementId  value       if  inputValue trim                  inputValue    World        document getElementById  greet   innerText   greeter inputValue       When I compile with tsc I get the following  error     home bjarkef sandbox greeter ts 8 53   The property  value  does not exist on value of type  HTMLElement   However the compiler does output a javascript file  which works just fine in chrome   How come I get this error  And how can I fix it   Also  where can I look up which properties are valid on a  HTMLElement  according to typescript   Please note I am very new to javascript and typescript  so I might be missing something obvious

User · Accepted Answer

Based on Tomasz Nurkiewiczs answer  the  problem  is that typescript is typesafe     So the document getElementById   returns the type HTMLElement which does not contain a value property  The subtype HTMLInputElement does however contain the value property   So a solution is to cast the result of getElementById   to HTMLInputElement like this   var inputValue     lt HTMLInputElement gt document getElementById elementId   value     lt  gt  is the casting operator in typescript  See the question TypeScript  casting HTMLElement   The resulting javascript from the line above looks like this   inputValue    document getElementById elementId   value    i e  containing no type information

User · Answer

If you are using angular you can use -  const element   document getElementById  elemId   as HTMLInputElement

User · Answer

If you are using react you can use the as operator   let inputValue    document getElementById elementId  as HTMLInputElement  value

User · Answer

A quick fix for this is use     to select the attribute   function greet elementId        var inputValue   document getElementById elementId   value        if inputValue trim                    inputValue    World             document getElementById  greet   innerText   greeter inputValue       I just try few methods and find out this solution  I don t know what s the problem behind your original script   For reference you may refer to Tomasz Nurkiewicz s post

User · Answer

There is a way to achieve this without type assertion  by using generics instead  which are generally a bit nicer and safer to use  Unfortunately  getElementById is not generic  but querySelector is  const inputValue   document querySelector lt HTMLInputElement gt    greet    value   Similarly  you can use querySelectorAll to select multiple elements and use generics so TS can understand that all selected elements are of a particular type  const inputs   document querySelectorAll lt HTMLInputElement gt    my-input     This will produce a NodeListOf lt HTMLInputElement gt

User · Answer

The problem is here   document getElementById elementId  value   You know that HTMLElement returned from getElementById   is actually an instance of HTMLInputElement inheriting from it because you are passing an ID of input element  Similarly in statically typed Java this won t compile   public Object foo       return 42     foo   signum      signum   is a method of Integer  but the compiler only knows the static type of foo    which is Object  And Object doesn t have a signum   method   But the compiler can t know that  it can only base on static types  not dynamic behaviour of your code  And as far as the compiler knows  the type of document getElementById elementId  expression does not have value property  Only input elements have value   For a reference check HTMLElement and HTMLInputElement in MDN  I guess Typescript is more or less consistent with these

User · Answer

Problem      error Property  text  does not exist on type  HTMLElement    Solution  in typeScript we need to cast document getElementById   which returns type HTMLElement in  lt  HTMLScriptElement  gt   So we can do it by by following way to resolve the error as expected by typescript js  Code  var content  string      lt  HTMLScriptElement  gt  document getElementById contentId   text    It worked for me   hope it works for you as well

User · Answer

We could assert  const inputElement  HTMLInputElement   document getElementById  greet    Or with as-syntax const inputElement   document getElementById  greet   as HTMLInputElement  Giving const inputValue   inputElement value    now inferred to be string

User · Answer

Also for anyone using properties such as Props or Refs without your  DocgetId s  then you can       as HTMLInputElement  value    Where the inverted quotes is your props value so an example would be like so   var val    this refs newText as HTMLInputElement  value  alert  Saving this     val

User · Answer

If you have dynamic element ID where you need to assign the dynamic value  you may use this    element id   you dynamic id    dynamic val   you dynamic value  let  el   document getElementById element id    el value   dynamic val toString     This works for me

User · Answer

Try casting the element you want to update to HTMLInputElement   As stated in the other answers you need to hint to the compiler that this is a specific type of HTMLElement   var inputElement    lt HTMLInputElement gt document getElementById  greet    inputElement value   greeter inputValue

User · Answer

This work for me   let inputValue    swal getPopup   querySelector   inputValue   as HTMLInputElement  value

[typescript] The property 'value' does not exist on value of type 'HTMLElement'

Examples related to typescript