javascript - AJAX API 货币

Question

```https://codepen.io/aparandeh/pen/yQjZma?editors=1010```

但是当我添加这个 <h1>Bitcoin Current Price is: <span id="price"></span></h1>

它只是出现在第一行的钱，但第二行什么都没有（使用相同的 id）

谁能帮我？

标签： javascriptajaxapi

Answer 1

这对我有用：

var btn = document.querySelector("button");

// AJAX Request
var XHR = new XMLHttpRequest();

// On page load, load the price using the default currency selected (USD)
window.addEventListener("load", function(){
    refresh();
});

// On press of the referesh button load the price
btn.addEventListener("click", function()
{
    refresh();
});

// Resend API request when referesh() is invoked.
function refresh()
{
    // Grab the radio buttons, then loop over them and if one is checked, grab its value and send API request using the currency selected
    document.getElementsByName("currency").forEach(function(data)
    {
        // Only run the code block if data.checked === true.
        if(data.checked)
        {
            XHR.onreadystatechange = function()
            {
                if(XHR.readyState === 4 && XHR.status === 200)
                {
                    var price = document.getElementsByClassName("price");
                    for (var i = 0; i < price.length; i++) {
                        price[i].innerHTML = JSON.parse(XHR.responseText).bpi[data.value].rate + " " + data.value; 
                    }
                }
            }
            
            XHR.open("GET", "https://api.coindesk.com/v1/bpi/currentprice.json");
            XHR.send();
        }
    });
}

<h1>Bitcoin Current Price is: <span class="price"></span></h1>
<h1>Bitcoin Current Price is: <span class="price"></span></h1>

<form action="">
  <input type="radio" name="currency" value="USD" checked> USD<br>
  <input type="radio" name="currency" value="GBP"> GBP<br>
  <input type="radio" name="currency" value="EUR"> EUR
</form>
<br>
<button>Referesh Data</button>

您必须写class=price而不是id=price. 然后您可以选择所有具有类价格的元素，然后使用for循环您可以为每个元素执行代码。

也很抱歉我的英语不好:)