ドロップダウンで変数を定義できません

Question

私は最初のウェブサイトを作成しています。

Firefox-Console：「速度が定義されていません」、なぜですか？ （ "myvalues" の値がchart.js図のデータです。）

編集：だからここに私は右、グローバルスコープの両方の変数を宣言し

var speed = "50"; 

window.test = function(e){ 

if(e.value=="Motor1"){ 
    alert(e.value); 
    speed = "50";//call here any function 
} 
else if(e.value=="Motor2"){ 
    alert(e.value); 
    speed = "30";//call here any function  
} 
else if(e.value == "Motor3"){ 
    alert(e.value); 
    speed = "90";//call here any function 
}} 
    var myvalues = new Array(); 
    myvalues.push(speed); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 




     var data = { 
     labels: ["Top-Speed", "Acceleration", "Cost", "Durability", "H", "R", "W", "T"], 
    datasets: [ 

     { 
      fillColor: "rgba(255, 0, 0, 0.31)", 
      strokeColor: "rgb(221, 221, 221)", 
      pointColor : "rgb(255, 255, 255)", 
      pointStrokeColor : "#fff", 
      borderWidth : "5000000000000", 
      backgroundColor: "rgb(221, 221, 221)", 
      data : myvalues 
     } 
    ] 
}; 



    var ctx = $("#canvas")[0].getContext("2d"); 
    var TestChart = new Chart(ctx, { type: 'radar', 
            data: data, 
            options: options}); 

    new Chart(ctx).Radar(data,options); 
    </script> 

？私はもうコンソールでエラーメッセージを受け取っていませんが、私のグラフにはデータが表示されません。グローバルスコープでvar speed = "50"を定義すると、入力されたデータが表示されます。したがって、速度を変更する機能は動作しません。どうしてか分かりません。

ありがとうございました！

Answer 1

speed変数がIfスコープ内にあると宣言しています。

この

window.test = function(e){ 
var speed; 
if(e.value=="Motor1"){ 
    alert(e.value); 
    speed = "50";//call here any function 
} 
else if(e.value=="Motor2"){ 
    alert(e.value); 
    speed = "30";//call here any function  
} 
else if(e.value == "Motor3"){ 
    alert(e.value); 
    speed = "90";//call here any function 
} 
    var myvalues = new Array(); 
    myvalues.push(speed); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
} 

で試してみてくださいEDIT：window.testは関数であり、それは文書で手続きを実行していないため

編集したコードは動作しません。それは、任意の点で呼び出すことができるが、呼び出さない関数を作成するだけです。ページロード時にmyvalues変数がデータソースとして送信されるため、の後にwindow.test関数が呼び出されたため、適切な速度が得られません。

グラフ初期化コードを関数内に配置して、残りのコードと一緒に実行する必要があります。 ソリューション：

window.test = function(e) { 
    var speed = "1"; //some default value 

    if (e.value == "Motor1") { 
     alert(e.value); 
     speed = "50"; //call here any function 
    } else if (e.value == "Motor2") { 
     alert(e.value); 
     speed = "30"; //call here any function  
    } else if (e.value == "Motor3") { 
     alert(e.value); 
     speed = "90"; //call here any function 
    } 
    var myvalues = new Array(); 
    myvalues.push(speed); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 
    myvalues.push("10"); 




    var data = { 
     labels: ["Top-Speed", "Acceleration", "Cost", "Durability", "H", "R", "W", "T"], 
     datasets: [ 

      { 
       fillColor: "rgba(255, 0, 0, 0.31)", 
       strokeColor: "rgb(221, 221, 221)", 
       pointColor: "rgb(255, 255, 255)", 
       pointStrokeColor: "#fff", 
       borderWidth: "5000000000000", 
       backgroundColor: "rgb(221, 221, 221)", 
       data: myvalues 
      } 
     ] 
    }; 




    var ctx = $("#canvas")[0].getContext("2d"); 
    var TestChart = new Chart(ctx, { 
     type: 'radar', 
     data: data, 
     options: options 
    }); 

    new Chart(ctx).Radar(data, options); 

} 

Answer 2

ザッツあなたはif節で速度を定義するために使用された場合、したがって、速度が定義されていません。 デバッガを使用しているときに調べることができます。 私はまた、この

var speed; 
 
var myValues = [10, 10, 10, 10, 10, 10, 10, 10]; 
 
document.getElementById("data").innerHTML = "myValues = ["+myValues+"]"; 
 

 
window.test = function(e) { 
 
    //alert(e.value); 
 
    switch (e.value) { 
 
    case "Motor1": 
 
     updateSpeed(50); 
 
     break; 
 
    case "Motor2": 
 
     updateSpeed(30); 
 
     break; 
 
    case "Motor3": 
 
     updateSpeed(90); 
 
     break; 
 
    } 
 
}; 
 

 
updateSpeed = function(newSpeed) { 
 
    var index = myValues.indexOf(speed); 
 
    if (index > -1) { 
 
    myValues.splice(index, 1); 
 
    } 
 
    speed = newSpeed; 
 
    myValues.push(newSpeed); 
 
    document.getElementById("data").innerHTML = "myValues = ["+myValues+"]"; 
 
}

<select name="Motors" onchange="test(this);"> 
 
    <option selected="selected">Choose your motors</option> 
 
    <option value="Motor1">Motor1</option> 
 
    <option value="Motor2">Motor2</option> 
 
    <option value="Motor3">Motor3</option> 
 
</select> 
 
<br> 
 
<code id="data"></code>