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的值，请从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="" />