Defining Variable in Dropdown fails

Question

I am creating my first website.

Firefox-Console: "Speed is not defined", but why? (The values of "myvalues" are data for chart.js diagram.)

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>

So here I declared both variables in global scope, right? I don´t get any error message by console anymore, but my chart does not show any data. If I define var speed ="50" in global scope, it shows the entered data. So the function to change var speed does not work. I don´t know why.

Thanks for help!

Answer 1

You are declaring speed variable inside If scope.

Try with this

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:

Your edited code does not work because window.test is a function, and it does not execute procedural with the document. It just creates a function which can be invoked at any point, but does not invoke it. Since myvalues variable is sent as data source upon page load, it will not have proper speed, cause you invoked window.test function after the graph has been initialized.

You should place your graph initialization code inside the function, so it gets executed with the rest of the code. Solution:

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

Thats because you define speed in a if clause, therefore speed isn't defined when used. You can look into it when using the debugger. I would also use a switch statement, check out this

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>