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

Question

学习 Typescript 并尝试构建一个简单的文本框，在提交后显示文本。

我能够很好地捕获输入，现在正在尝试将其报告给用户。

问题出在编译打字稿上，给出了这个错误信息：属性 'value' 在类型 'HTMLDivElement' 上不存在。

我只是想分配 div messageList 的值来打印数组（还不关心格式化）。

我一直在网上搜索，我能找到的大部分内容都说它一定是命名错误，我尝试将名称更改为 1，但仍然没有成功。

曾尝试在演员表中使用一般的 HTML 元素，但没有任何乐趣。

TS代码：

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
}

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>

任何帮助将不胜感激，谢谢

Answer 1

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

您需要像在 post 函数中使用 text 那样将其转换为 HTMLInputElement：

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

HTMLDiv元素类型没有 value 属性，这就是您收到该错误的原因。

编辑：我刚刚看到 messageList 是 <div>。 Div 不能包含 value 属性。对于自定义属性，请使用 data-*

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

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

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

html

getelementbyid

typescript