ERROR: Property 'value' does not exist on type 'HTMLDivElement' ? Typescript can't find my div?

Learning Typescript and trying to build a simple textbox that displays the text once submitted.

Am able to capture the input great and and now trying to report it back to the user.

The problem is on compilation typescript gives this error message: Property 'value' does not exist on type 'HTMLDivElement'.

Am simply trying to assign the value of the div messageList to print the array (don't care about formatting yet).

I have been searching the web and most I can find says it must be naming error, i tried changing the name to 1 and still no joy.

Have attempted to use general HTML element in the cast but no joy.

The TS code:

let messages = [];

class Message {
  content: string;
  constructor(
    public message: string
  ){
    this.message = message
  }
}

function post(message: string){
  var text = (<HTMLInputElement>document.getElementById("messageInput")).value;
  const newPost = new Message(text)
  messages.push(newPost.message)
  console.log(messages)
  this.report(newPost)
}

function report(message: Message){
  (<HTMLDivElement>document.getElementById("messageList")).value = messages
}

the HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Typescript Messages</title>
</head>
  <body>
    <textarea id="messageInput" type="text" name="message" rows="15" cols="40"></textarea>
    <button id="submitButton" type="submit" value="submit" onclick="post()">Post</button>
    <div id="messageList" value="">Hello rubhy</div>
    <script src="message.js"></script>
  </body>
</html>

Any help would be appreciated, thank you

Solution

function report(message: Message){
  (<HTMLDivElement>document.getElementById("messageList")).value = messages
}

You need to cast it as HTMLInputElement as you done with text in post function:

function report(message: Message){
  (<HTMLInputElement>document.getElementById("messageList")).value = messages
}

The HTMLDivElement type doesn't have the value property, so that's why you get that error.

EDIT: I just saw that messageList is a <div>. Div cannot contain a value property. For custom properties, use data-*

https://www.w3schools.com/tags/att_data-.asp