如何实现加密货币价格翻倍显示？代码故障排查求助

你遇到的问题核心是变量命名冲突：你已经用const live获取了页面上的DOM元素，之后又试图用let live声明一个存储翻倍价格的变量，这会导致变量重复定义，打断代码执行，最终页面无法正常显示数值。

修改方案 #

你可以通过两种简单方式实现价格翻倍：

方式1：直接在渲染时计算翻倍值

不需要额外声明变量，直接在插入HTML的模板字符串里计算2 * livePrice：

live.innerHTML = `<h2>${2 * livePrice}</h2>`;

方式2：声明新变量存储翻倍价格

如果后续需要复用这个翻倍后的数值，可以声明一个全新的变量（比如doubledPrice）来存储，避免和DOM元素变量live重名：

let doubledPrice = 2 * livePrice;
live.innerHTML = `<h2>${doubledPrice}</h2>`;

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body translate="no">
    <h2>Current price (2x):</h2>
    <h2 id="live"></h2>

    <script id="rendered-js">
      const live = document.getElementById("live");

      fetch("https://min-api.cryptocompare.com/data/pricemultifull?fsyms=ETH&tsyms=USD&e=Coinbase")
        .then((res) => res.json())
        .then((data) => {
          let livePrice = data.RAW.ETH.USD.PRICE;
          let dayPrice = data.RAW.ETH.USD.OPEN24HOUR;

          let p = parseFloat(((livePrice - dayPrice) / dayPrice) * 100).toFixed(2);

          // 直接计算翻倍后的值插入页面
          live.innerHTML = `<h2>${2 * livePrice}</h2>`;
        });
      //# sourceURL=pen.js
    </script>
  </body>
</html>

额外优化 #

如果需要让翻倍后的价格保留和原价格一致的小数位数，可以用toFixed()方法格式化：

live.innerHTML = `<h2>${(2 * livePrice).toFixed(2)}</h2>`;

内容的提问来源于stack exchange，提问作者0xWenMoon