使用来自外部 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

使用这个：

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

Answer 2

您将 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>

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

update a HTML input field with the data coming from a external Javascript Websocket

html

javascript

real-time

websocket

real-time-updates