Javascript onclick更改变量

Javascript onclick change the variable

本文关键字：变量 改变 onclick Javascript      更新时间：2023-09-26

我这里有一段代码，在我的画布上显示了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++)

添加到你的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;

如果你使用的是普通javascript(没有Jquery/Angular或其他)，最简单的方法是将"aantal"变量改为global(去掉声明中的"var")。并从另一个事件(下拉菜单将启动)更改该变量。

添加以下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;
    }
}
相关文章：