JSON没有在我的HTML上显示所有值

Question

我是一个新手程序员，我正在使用Django开发一个网站，在那里我使用我在网上生成的JSON打印加密货币的价格。我遇到了一个挑战，因为我的API并没有在我的html中显示所有我希望它显示的值。请注意，我已经检查了控制台，以确保API正常工作，并且我确认了它的正确工作，但挑战是我似乎无法理解为什么我不能在HTML上打印它。

下面是我用来打印价格的代码。在我的HTML上显示的价格是从比特币到Uniswap，而其余的没有显示。

我的JAVASCRIPT代码

var btc = document.getElementById("bitcoin");
var eth = document.getElementById("ethereum");
var doge = document.getElementById("dogecoin");
var lite = document.getElementById("litecoin");
var bin = document.getElementById("binancecoin");
var card = document.getElementById("cardano");
var xrp = document.getElementById("ripple");
var pol = document.getElementById("polkadot");
var uni = document.getElementById("uniswap");
var btc_cas = document.getElementById("bitcoin-cash");
var sol = document.getElementById("solana");
var chain = document.getElementById("chainlink");
var poly = document.getElementById("matic-network");
var theta = document.getElementById("theta-token");
var shiba = document.getElementById("shiba-inu");
var vec = document.getElementById("vechain");
var stel = document.getElementById("stellar");
var file = document.getElementById("filecoin");
var aav = document.getElementById("aave");
var mon = document.getElementById("monero");
var trn = document.getElementById("tron");
var cron = document.getElementById("cronos");

var settings = {
    "async": true,
    "scrossDomain": true,
    "url": "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Cethereum%2Cdogecoin%2Clitecoin%2Cbinancecoin%2Ccardano%2Cripple%2Cpolkadot%2Cuniswap%2Cbitcoin-cash%2Csolana%2Cchainlink%2Cmatic-network%2Ctheta-token%2Cshiba-inu%2Cvechain%2Cstellar%2Cfilecoin%2Caave%2Cmonero%2Ctron%2Ccronos&vs_currencies=usd",
    "method": "GET",

}
$.ajax(settings).done(function(response){
    btc.innerHTML = response.bitcoin.usd;
    eth.innerHTML = response.ethereum.usd;
    doge.innerHTML = response.dogecoin.usd;
    lite.innerHTML = response.litecoin.usd;
    bin.innerHTML = response.binancecoin.usd;
    card.innerHTML = response.cardano.usd;
    xrp.innerHTML = response.ripple.usd;
    pol.innerHTML = response.polkadot.usd;
    uni.innerHTML = response.uniswap.usd;
    btc.innerHTML = response.bitcoin-cash.usd;
    sol.innerHTML = response.solana.usd;
    chain.innerHTML = response.chainlink.usd;
    poly.innerHTML = response.matic-network.usd;
    theta.innerHTML = response.theta-token.usd;
    shiba.innerHTML = response.shiba-inu.usd;
    vec.innerHTML = response.vechain.usd;
    stel.innerHTML = response.stellar.usd;
    file.innerHTML = response.filecoin.usd;
    aav.innerHTML = response.aave.usd;
    mon.innerHTML = response.monero.usd;
    trn.innerHTML = response.tron.usd;
    cron.innerHTML = response.cronos.usd;
});

我的HTML代码：

<div class="coin-list">
    <div class="coin">
       <img src="{% static 'images/bitcoin.png' %}">
       <div>
           <h3>$<span id="bitcoin"></span></h3>
           <p>Bitcoin</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/ethereum.png' %}">
       <div>
           <h3>$<span id="ethereum"></span></h3>
           <p>Ethereum</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/dogecoin.png' %}">
       <div>
           <h3>$<span id="dogecoin"></span></h3>
           <p>Dogecoin</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/litecoin.png' %}">
       <div>
           <h3>$<span id="litecoin"></span></h3>
           <p>Litecoin</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/binance.png' %}">
       <div>
           <h3>$<span id="binancecoin"></span></h3>
           <p>Binance coin</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/cardano.png' %}">
       <div>
           <h3>$<span id="cardano"></span></h3>
           <p>Cardano</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/xrp.png' %}">
       <div>
           <h3>$<span id="ripple"></span></h3>
           <p>XRP</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/dot.png' %}">
       <div>
           <h3>$<span id="polkadot"></span></h3>
           <p>Polkadot</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/uniswap.png' %}">
       <div>
           <h3>$<span id="uniswap"></span></h3>
           <p>Uniswap</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/bitcoinn.png' %}">
       <div>
           <h3>$<span id="bitcoin-cash"></span></h3>
           <p>Bitcoin Cash</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/solana.png' %}">
       <div>
           <h3>$<span id="solana"></span></h3>
           <p>Solana</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/chainlink.png' %}">
       <div>
           <h3>$<span id="chainlink"></span></h3>
           <p>Chainlink</p>
       </div>
    </div>
    <div class="coin">
       <img src="{% static 'images/polygon.png' %}">
       <div>
           <h3>$<span id="matic-network"></span></h3>
           <p>Polygon</p>
       </div>
    </div>
     <div class="coin">
       <img src="{% static 'images/theta.png' %}">
       <div>
           <h3>$<span id="theta-token"></span></h3>
           <p>Theta</p>
       </div>
    </div>
     <div class="coin">
       <img src="{% static 'images/shiba.png' %}">
       <div>
           <h3>$<span id="shiba-inu"></span></h3>
           <p>Shiba Inu</p>
       </div>
    </div>
     <div class="coin">
       <img src="{% static 'images/vechain.png' %}">
       <div>
           <h3>$<span id="vechain"></span></h3>
           <p>Vechain</p>
       </div>
    </div>

Answer 1

这是有效的语法，但它并不意味着你认为它能做什么

btc.innerHTML = response.bitcoin-cash.usd;

它的实质意思是：

btc.innerHTML = response.bitcoin - cash.usd;

response对象没有名为bitcoin的属性，也没有cash变量。这就产生了一个错误。打开浏览器的调试工具，观察控制台上的错误。

您仍然可以使用带有连字符的属性，只需使用括号符号即可：

btc.innerHTML = response['bitcoin-cash'].usd;