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

Question

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

我提供了下面的代码 sn-ps 以及我从中提取数据的外部 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) || "";