Определение переменной в раскрывающемся списке не удается

Question

Я создаю свой первый веб-сайт.

Firefox-Console: «Скорость не определена», но почему? (Значения "myvalues" являются данные для chart.js диаграммы.)

Edit:

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" в глобальной области, он отображает введенные данные. Таким образом, функция изменения скорости var не работает. Я не знаю, почему.

Спасибо за помощь!

Answer 1

Вы объявляете speed переменной внутри If scope.

Try с этим

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

Это потому, что вы определяете скорость в случае положение, поэтому скорость не определена при использовании. Вы можете изучить его при использовании отладчика. Я хотел бы также использовать переключатель заявление, проверить это

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>