尝试获取CoinGecko API和用户输入来计算，然后输出。

Question

我试着把这件事做了一段时间，但似乎无法说服我的新手。我可以console.log的硬币，但似乎不能让它乘以“btcnumber”输入，然后更新.innerText。

​

const api_url = "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Cethereum%2Cbinancecoin%2Ccardano%2Csolana%2Cterra-luna&vs_currencies=usd";
async function getData() {
    const response = await fetch(api_url);
    const data = await response.json();
    console.log(data.bitcoin.usd);
}
getData();


function coinValue() {
    let bitcoin = parseInt(document.getElementById("btcnumber") * (data.bitcoin.usd));
    document.getElementById("c-v").innerText = bitcoin.toFixed(8);
}

document.addEventListener("DOMContentLoaded", function() {
    let submit = document.getElementById("calculateButton");
    calculateButton.addEventListener("click", function() {
        coinValue()
    })

})

<input id="btcnumber" type="number" class="form-control" placeholder="Number Purchased">
                                    
<button id="calculateButton" onclick=coinValue()>Calculate</button>

<h4>CURRENT VALUE <span id="c-v"></span></h4>

​

Answer 1

之所以发生这种情况，是因为在coinValue()函数中，data变量不存在。通过将它排除在函数之外，使其成为一个全局变量。

此外，在coinValue()函数中，您必须在乘法的末尾添加.value，以获得输入的实际值。

​

let data;

const api_url = "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Cethereum%2Cbinancecoin%2Ccardano%2Csolana%2Cterra-luna&vs_currencies=usd";
async function getData() {
    const response = await fetch(api_url);
    data = await response.json();
    console.log(data.bitcoin.usd);
}
getData();


function coinValue() {
    let bitcoin = parseInt(document.getElementById("btcnumber").value * (data.bitcoin.usd));
    document.getElementById("c-v").innerText = bitcoin.toFixed(8);
}

document.addEventListener("DOMContentLoaded", function() {
    let submit = document.getElementById("calculateButton");
    calculateButton.addEventListener("click", function() {
        coinValue()
    })

})

<input id="btcnumber" type="number" class="form-control" placeholder="Number Purchased">
                                    
<button id="calculateButton" onclick=coinValue()>Calculate</button>

<h4>CURRENT VALUE <span id="c-v"></span></h4>

​