ページがロードされたときにNaNが返されますが、変更/更新が正しく機能する場合、修正する方法は？

Question

私はのcadConvert（）関数を実行したいので、CAD値に基づいてスライダによって設定されたBTCの値を計算するようにしますが、私はcadの値を変更/更新するスライダー...

「NaN」と言うのではなく、読み込み時にBTCを表示したいのですが、変数を割り当てるときにのみ動作します。価格私は動的なものではなく静的な整数ですbitcoinaverageのapiから引っ張る。あなたのjsfiddleから

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

：なぜあなたは、JS、この中でcadConvertを呼び出すことはありませんか？基本的には、データを待ってから、すべての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/