Question

我这里有一段代码，在我的画布中它显示了10个三角形进入一个圆圈，但我的问题是变量是10（var aantal = 10）。我想要一个下拉菜单，人们可以在画布中说明要在画布中旋转多少个三角形。

这是现在的样子： http://21248.hosts.ma-cloud.nl/bewijzenmap/periode4/SCT/10x3hoek/index.html

      var aantal = 10;
      var triangle = [];

      for (var i = 0; i < aantal; i++){
          triangle[i] = new Triangle;
          triangle[i].xLeft = 20 + 30*i;
          triangle[i].yLeft = 20 + 20*i;

      }

      (function drawFrame () {
         window.requestAnimationFrame(drawFrame, canvas);
         context.clearRect(0, 0, canvas.width, canvas.height);

       for (var i = 0; i < aantal; i++)

Answer 1

添加以下html以创建下拉菜单

<select id='aantal-select'>
  <option value='10'>10</option>
  <option value='20'>20</option>
  <option value='30'>30</option>
</select>

然后使用以下脚本更新aantal变量

var selectElem = document.getElementById('aantal-select');

selectElem.onchange = function() {
    aantal = selectElem.value;

    var triangle = [];
    for (var i = 0; i < aantal; i++){
    triangle[i] = new Triangle;
        triangle[i].xLeft = 20 + 30*i;
        triangle[i].yLeft = 20 + 20*i;
    }
}

Answer 2

添加到您的HTML

<select id="select_triangles">
   <option value="1">1</option>
   <option value="2" selected="selected">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
</select>

在您的javascript代码中，您可以像这样检查所选值的值

var e = document.getElementById("select_triangles");
var strUser = e.options[e.selectedIndex].value;

Answer 3

如果您使用的是vanilla javascript（没有Jquery / Angular或任何其他），最简单的方法是更改＆＃34; aantal＆＃34;变量为全局变量（删除声明中的＆＃34; var＆＃34;）。并从另一个事件（下拉列表将启动）更改此变量。

Javascript onclick更改变量

3 个答案: