如何使我的var更改为与下拉菜单中的值相同的值？

Question

I have some code which draws a parametrical circle and a var that dictates how many points it is made up of. I can't figure out any way to change the var according to what option I pick in the dropdown menu.

<!-- Dropdown -->
<select id="myList" onchange="PointsAmount()">
    <option>2</option>
    <option>4</option>
    <option>8</option>
    <option>16</option>
    <option>32</option>
    <option>64</option>
    <option>128</option>
</select>

var points = 16;
var step = 2*Math.PI/points;
var h = 150;
var k = 150;
var r = 50;

function PointsAmount(){
  var points = document.getElementById("myList").value;
}

//Circle draw
ctx.beginPath();

for(var theta=0;  theta < 2*Math.PI;  theta+=step){ 
    var x = h + r*Math.cos(theta);
    var y = k - r*Math.sin(theta);
    ctx.lineTo(x,y);
}

ctx.closePath();
ctx.stroke();

Answer 1

You are using var points = document.getElementById("myList").value; . What you are doing is basically redefining points inside the function. All you need to do is to remove the word var from the start of the line and it will work as intended.

 var points = 16; var step = 2 * Math.PI / points; var h = 150; var k = 150; var r = 50; function PointsAmount() { points = document.getElementById("myList").value; console.log(points); } 

 <select id="myList" onchange="PointsAmount()"> <option>2</option> <option>4</option> <option>8</option> <option>16</option> <option>32</option> <option>64</option> <option>128</option> </select> 

You can double check what you did before with calling a function to print the value of points every time the value is changing:

 var points = 16; var step = 2 * Math.PI / points; var h = 150; var k = 150; var r = 50; function PointsAmount() { var points = document.getElementById("myList").value; console.log('inner var points=' + points); printPoints(); } function printPoints() { console.log('global var points=' + points); } 

 <!-- Dropdown --> <select id="myList" onchange="PointsAmount()"> <option>2</option> <option>4</option> <option>8</option> <option>16</option> <option>32</option> <option>64</option> <option>128</option> </select> 

You can see that the global definition of points is always 16, and that the inner function variable you defined there is changing, not effecting the global one. That is the idea of scopes. The var points exist only inside the scope of PointsAmount but not out of it.