Javascript onclick更改變量

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

如果您使用的是普通javascript（沒有Jquery / Angular或任何其他語言），最簡單的方法是將“ aantal”變量更改為global（在聲明中刪除“ var”）。 並從另一個事件更改該變量（下拉菜單將啟動）。