错误：“HTMLDivElement”类型上不存在属性“值”？打字稿找不到我的div？答案

【问题标题】：ERROR: Property 'value' does not exist on type 'HTMLDivElement' ? Typescript can't find my div?错误：“HTMLDivElement”类型上不存在属性“值”？打字稿找不到我的div？
【发布时间】：2019-11-30 14:16:50
【问题描述】：

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

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

问题在于编译 typescript 给出了这个错误信息：类型“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>

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

【问题讨论】：

value 不是div 的有效属性。如果您尝试将一些信息实际放入 div 标签本身，您可能需要使用data-value。

标签： html typescript getelementbyid

【解决方案1】：

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

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

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

HTMLDivElement 类型没有 value 属性，所以这就是您收到该错误的原因。

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

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

【讨论】：

谢谢！完美运行！