javascript - 我怎样才能使我的变量更改为与下拉菜单中的值相同？

Question

我有一些代码可以绘制一个参数圆和一个指示它由多少个点组成的变量。我无法找出任何方法来根据我在下拉菜单中选择的选项来更改 var。

<!-- 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

您正在使用varpoints = document.getElementById("myList").value;。您所做的基本上是在函数内重新定义点。您需要做的就是从行首删除单词 var，它就会按预期工作。

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>

您可以仔细检查之前所做的事情，调用函数以在每次值发生变化时打印点的值:

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>

您可以看到，points 的全局定义始终为 16，并且您定义的内部函数变量正在发生变化，但不会影响全局变量。这就是范围的想法。 var 点 仅存在于 PointsAmount 范围内，但不存在于其之外。