使用API​​数据进行价格换算

Question

到目前为止，我已经设法从API中获取价格数据并将其显示在h1中。但是，我不知道如何从h1获取值并将其用于转换器函数。我目前以100为例，但是我想使用价格值代替100。

function getElement(id) {
  return document.getElementById(id);
}

fetch('https://api.coingecko.com/api/v3/coins/stellar?localization=false&sparkline=false')
  .then(res => res.json())
  .then((res) => {
    const market_data = res.market_data;
    getElement('usdprice').innerHTML = "$" + market_data.current_price.usd.toFixed(6);
  });

function calcusd() {
  x = document.getElementById("xlm").value;
  document.getElementById("usd").value = x * 100;
}

function calcxlm() {
  x = document.getElementById("usd").value;
  document.getElementById("xlm").value = x / 100;
}

<h1 id="usdprice"></h1>

<div id="Converter">
  <h1>Price Converter</h1>

  <h3>XLM:</h3> <input oninput="calcusd()" onchange="calcusd()" type="number" id="xlm">
  <h3>USD:</h3> <input oninput="calcxlm()" onchange="calcxlm()" type="number" id="usd">
</div>

Answer 1

我假设您要使用usdprice元素中的值代替虚拟值100。

获取innerHTML中的h1->使用replace删除$符号->使用parseFloat将其转换为浮点数->将其乘以输入值。

这是一个有效的代码段：

function getElement(id) {
  return document.getElementById(id);
}

fetch('https://api.coingecko.com/api/v3/coins/stellar?localization=false&sparkline=false')
  .then(res => res.json())
  .then((res) => {
    const market_data = res.market_data;
    getElement('usdprice').innerHTML = "$" + market_data.current_price.usd.toFixed(6);
  });

function calcusd() {
  let x = getElement("xlm").value;
  getElement("usd").value = x * getUSD();
}

function calcxlm() {
  let x = getElement("usd").value;
  getElement("xlm").value = x / getUSD();
}

function getUSD() {
  try {
    return parseFloat(getElement('usdprice').innerHTML.replace("$", ""));
  } catch {
    return 100;
  }
}

<h1 id="usdprice"></h1>

<div id="Converter">
  <h1>Price Converter</h1>

  <h3>XLM:</h3> <input oninput="calcusd()" onchange="calcusd()" type="number" id="xlm">
  <h3>USD:</h3> <input oninput="calcxlm()" onchange="calcxlm()" type="number" id="usd">

</div>