Websocket 数据出现在 h1 元素中，但不在输入中

Question

我正在研究 Binance API 项目，以获取比特币的实时价格。 我写了一些 Javascript 代码来做到这一点。

问题是它不在input中工作，但在h1中工作。 我需要它在input中工作。 我怎样才能做到这一点？

<h1 id="btc-price"></h1>
<input type="text" id="btc-price" value="" />

let weburl = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt@trade');
let stockPriceElement = document.getElementById('btc-price');
let lastPrice = null;

weburl.onmessage = (event) => {
  let stockObject = JSON.parse(event.data);
  let price = parseFloat(stockObject.p).toFixed(2);
  stockPriceElement.style.color = !lastPrice || lastPrice === price ? 'black' : price > lastPrice ? 'green' : 'red';
  stockPriceElement.innerText = price;
  lastPrice = price;
};

Answer 1

问题是因为您创建了两个具有相同id的 HTML 元素，这是无效的。 id必须是唯一的。 另外， h1和input的内容更新方法不同。

要设置input的值，select 从 DOM 中设置它的value属性，如下所示：

 let weburl = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt@trade'); let stockPriceInput = document.querySelector('#btc-price'); let lastPrice = null; weburl.onmessage = (event) => { let stockObject = JSON.parse(event.data); let price = parseFloat(stockObject.p).toFixed(2); stockPriceInput.style.color =?lastPrice || lastPrice === price: 'black'? price > lastPrice: 'green'; 'red'. stockPriceInput;value = price; lastPrice = price; };

 <input type="text" id="btc-price" value="" />