样式显示等于'block'无效

Question

我的代码正在从外部API提取数据，但是我的输出在我单击按钮之前出现。它显示为NaN值。当我在输入字段中输入数字时，它会计算实数，并且一切都很好，但是理想情况下，我不希望在单击之前看到输出。

当我这样做：

document.querySelector(".output").style.display = "none";

在执行此功能之前，>]

document.querySelector(".output").style.display = "block";
在该函数中，我之前什么都看不到，但是单击该按钮调用该函数后，我也看不到任何东西。为什么会这样？

const button = document.getElementById("btn");
const input = document.getElementById("currency");

button.addEventListener("click", currencyConverter);

document.querySelector(".output").style.display = "none";

async function currencyConverter() {
  const url = `https://api.frankfurter.app/latest?amount=${input.value}&from=EUR&to=USD,CAD,AUD,CHF,GBP`;

  const response = await fetch(url);
  const data = await response.json();
  console.log(data);

  document.querySelector(".output").style.display = "block";

  document.getElementById("output").innerHTML = `
    <div class='usa'>
    <h2>USD</h2> <img src='usd.svg' height='40'> <h2>${(
      (input.value * data.rates.USD) /
      input.value
    ).toFixed(2)}</h2>
    </div>
...
currencyConverter();


等...

我的代码正在从外部API提取数据，但是我的输出在我单击按钮之前出现。它显示为NaN值。当我在输入字段中输入数字时，它将计算实数，然后...

Answer 1

您在代码末尾有currencyConverter();，因此将在单击按钮之前执行您的功能。如果删除该行代码，您的函数将正常运行。希望这会有所帮助！