使用来自外部 Javascript Websocket 的数据更新 HTML 输入字段

Question

我是 JavaScript 新手，不确定这是否是一个非常基本的问题。我使用从外部 WebSocket 获取的数据创建了一个比特币价格更新仪表板。我设法从 WebSocket 获取数据并将其显示在控制台选项卡上，并在 h1 标记中显示数据。价格每秒更新一次。现在我需要在 html 字段中显示价格。我尝试过，但这对我来说有点难。

我提供了下面的代码片段以及我从中提取数据的外部 Websocket。

请让我知道如何将行动态插入 HTML 输入字段。提前非常感谢您

<input type="text" class="form-control" id="btcpricenow" readonly />
<script>
 var priceSocket = new WebSocket("wss://stream.binance.com:9443/ws/btcusdt@trade"),
  liveprice = document.getElementById("btcpricenow");
 priceSocket.onmessage = function (event) {
  var liveprice = JSON.parse(event.data);
  liveprice.innerText = parseFloat(liveprice.p).toFixed(2);
 };
</script>

Answer 1

您将

liveprice

设置为 HTML 元素，然后在函数内将其重置为已解析的

event.data

。不要像这样重置变量，只需设置一个新变量即可。另外，当您将值放入

input

元素内时，请使用

value

，而不是

innerHTML

<input type="text" class="form-control" id="btcpricenow" readonly>
<script>
  let priceSocket = new WebSocket("wss://stream.binance.com:9443/ws/btcusdt@trade"),
    liveprice = document.getElementById("btcpricenow");
  priceSocket.onmessage = function(event) {
    let data = JSON.parse(event.data);
    liveprice.value = parseFloat(data.p).toFixed(2);
  }
</script>

Answer 2

用这个：

const data= JSON.parse(event.data);
let liveprice = document.getElementById("btcpricenow");
liveprice.value = parseFloat(data.p).toFixed(2) || "";