函數在加載頁面時返回NaN，但在更改/更新正常工作時，如何修復它？

Question

當我加載頁面時，我想運行cadConvert（）函數，以便根據CAD值計算由滑塊設置的BTC的值，但只有在更改/更新CAD值或移動時纔會這樣做滑塊...

我希望它顯示BTC當量，當它加載而不是說'NaN'，它只工作時，我想分配變量價格靜態整數，而不是動態的我是從bitcoinaverage的api拉動。

https://jsfiddle.net/7b2jaLxh/12/

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

noUiSlider.create(directionSlider, { 
    start: 20, 
    connect: [true, false], 
    direction: 'ltr', 
    range: { 
    'min': 2, 
    'max': 99.99 
    } 
}); 
var price; 
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); 
    cadConvert(); 

}); 

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

} 

Answer 1

從你的jsfiddle：你爲什麼不叫cadConvert在這個js？基本上只是等待數據，然後運行所有的JavaScript代碼。這樣，價格將在數據檢索後定義。

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; 
     document.getElementById('btc').innerHTML = "Global Market: $" + (price).toFixed(2) + " CAD"; 
     cadConvert(); 
    } 
}; 
xbtc.send(); 

Answer 2

您遇到此問題的原因是price未初始定義！總是初始化varibales是一個好習慣！ 27 線，你可以把價格定到directionSlider var price = directionSlider.noUiSlider.get();

https://jsfiddle.net/wt0asmqe/