时间戳

首页 > 解决方案 > 我怎样才能使我的 var 更改为与下拉菜单中的值相同的值？

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

问题描述

我有一些代码可以绘制一个参数圆和一个 var 来指示它由多少个点组成。根据我在下拉菜单中选择的选项，我想不出任何方法来更改 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();

标签： javascripthtml

解决方案

您正在使用var points = document.getElementById("myList").value;. 您所做的基本上是points在函数内部重新定义。您需要做的就是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 points范围之内，PointsAmount而不存在于它的范围之外。

推荐阅读