javascript - 如何在JS函数中使用JSON数据？

Question

我正在从 bitcoinaverage.com 的 API 中提取数据并将其保存在 var 'price' 中。

后来我想在 JS 中的计算中使用它，但它不起作用，只有当我输入静态整数而不是动态“价格”时才有效。

我已经尝试过对价格使用pasteInt()，但它仍然不起作用。关于我可能做错了什么有什么想法吗？ https://jsfiddle.net/7b2jaLxh/

var xbtc = new XMLHttpRequest();
xbtc.open('GET', 'https://api.bitcoinaverage.com/ticker/global/CAD/', true);
xbtc.onreadystatechange = function(){
    if(xbtc.readyState == 4){
        var ticker = JSON.parse(xbtc.responseText);
        price = ticker.last;
    }
};
xbtc.send();

这是我使用价格变量的 JS:(在底部)

var directionSlider = document.getElementById('slider-direction');

noUiSlider.create(directionSlider, {
    start: 20,
    connect: [true, false],
    direction: 'ltr',
    range: {
        'min': 2,
        'max': 99.99
    }
});
var cadc = document.getElementById('cadc');
var btcc = document.getElementById('btcc');

directionSlider.noUiSlider.on('update', function( values, handle ) {
    cadc.value = directionSlider.noUiSlider.get();
    cadConvert();
});

cadc.addEventListener('change', function(){
    directionSlider.noUiSlider.set(this.value);
    cadConvert();
});
btcc.addEventListener('change', function(e){
   directionSlider.noUiSlider.set(this.value*price);
});
function cadConvert() {
    var cad = directionSlider.noUiSlider.get();
    var cadCalc = cad / price;
    document.getElementById("btcc").value = cadCalc;

}

Answer 1

尝试将 cad 变量赋值更改为:

var cad = parseFloat(directionSlider.noUiSlider.get());

这是因为 slider 很可能以字符串形式返回值，而不是 float 。

<小时/>

更新答案:

我做了一个 console.log(cad, typeof cad); 并且它确实是从 slider 返回的字符串值，因此我将代码更改为以下内容:

function cadConvert() {
    if(!price) return;
    var cad = parseFloat(directionSlider.noUiSlider.get());
    var cadCalc = cad / price;
    document.getElementById("btcc").value = cadCalc;
}

我测试过，你的 slider 现在工作正常。尝试这个更新的 fiddle :

https://jsfiddle.net/5pxvvmdL/

此外，我在顶部靠近其他声明的地方添加了一个 varprice; 声明，只是出于代码可读性的目的，即使当您在 Javascript 中分配变量而不使用 var< 时也是如此 它会自动声明为全局变量，最好在全局范围内(在任何函数之外)使用 var 按字面意思声明全局变量，从而在代码中明确执行此操作。如前所述，只是为了代码可读性目的。

此外，我注释掉了价格中的 document.getElementById('btc').innerHTML = "Global Market: $"+ (price).toFixed(2) + "CAD"; 行.js，因为文档中没有“btc”层，因此抛出错误。

最后，我在 onreadystatechange 事件中添加了对 cadConvert() 的调用，以便使用默认 slider 价格在加载后立即显示默认比特币价格。