javascript - 如何从单选按钮获取不同的值？

Question

我希望当我选择不同的货币时汇率会发生变化。但现在它只显示我的初始检查值。这是我的代码

   let btn = document.querySelector("button");
    let priceDisplay = document.querySelector("#price");
    let currency = document.querySelector('input[name=rate]:checked').value;
    
    btn.addEventListener("click",function(){
      let XHR = new XMLHttpRequest();
      XHR.onreadystatechange = function(){
        if(XHR.readyState == 4 && XHR.status==200){
           let data = JSON.parse(XHR.responseText);
           let price = data.bpi[currency].rate;
          priceDisplay.innerText = price + " " + currency;
        }
      }
      XHR.open("GET","https://api.coindesk.com/v1/bpi/currentprice.json");
      XHR.send();
    })

  <h1>Bitcoin Current Price is: <span id="price"></span></h1>
    <p>Pick your currency: </p>
    <input type="radio" id="USD" name="rate" value="USD" checked>
    <label for="USD">USD</label><br>
    <input type="radio" id="GBP" name="rate" value="GBP">
    <label for="GBP">GBP</label><br>
    <input type="radio" id="EUR" name="rate" value="EUR">
    <label for="EUR">EUR</label><br>
    <button>Refresh Data</button>

Answer 1

您需要输入querySelector()代码

btn.addEventListener("click",function() {
    let currency = document.querySelector('input[name=rate]:checked').value;
    ....
}

在单击事件处理程序内。原因是因为它在点击事件触发之前只执行一次，所以它只得到了1个第一个检查的值。当您单击该按钮时，它需要新的更新值。