Javascript変数を入力またはドロップダウンメニューに変更する

Question

私はここにコードを入れて、キャンバスに10個の三角形を円として表示しますが、変数は10（var aantal = 10）です。私は、キャンバス内で回転させなければならない三角形の数を人が言うことができるドロップダウンメニューが好きです。ここ

は、それが今のように見える方法です：ユーザーがちょうどENTERを押し

<input type="number" min="0" id="triangle" > 

を変更するようhttp://21248.hosts.ma-cloud.nl/bewijzenmap/periode4/SCT/10x3hoek/index.html

<canvas id="canvas" width="300" height="300"></canvas> 
<header>Your name</header> 

<script src="utils.js"></script> 
<script src="triangle.js"></script> 
<script> 
window.onload = function() { 
     var canvas = document.getElementById('canvas'); 
     context = canvas.getContext('2d'); 

     var omlaag = false; 
     var links = false; 
     var omhoog = false; 
     var speed = 0.5; 
     var posX = 0; 
     var posY = 0; 
     var lifeCycle = 1; 

     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++){  

     triangle[i].x = posX; 
     triangle[i].y = posY; 

      switch (lifeCycle) { 
      case 1: 
       posX += speed; 
       if (posX >= canvas.width) { 
        lifeCycle = 2; 
       } 
       break; 
      case 2: 
       posY += speed; 
       if (posY >= canvas.height) { 
        lifeCycle = 3; 
       } 
       break; 
      case 3: 
       posX -= speed; 
       if (posX <= 0) { 
        lifeCycle = 4; 
       } 
       break; 
      case 4: 
       posY -= speed; 
       if (posY <= 0) { 
        lifeCycle = 1; 
       } 
       break; 
      } 
      triangle[i].draw(context); 
     }   

     }()); 
}; 
</script> 

Answer 1

window.onload = function() { 
    var aantal =prompt("Enter how many triangles to rotate?"); 

      var canvas = document.getElementById('canvas'); 
      context = canvas.getContext('2d'); 

      var omlaag = false; 
      var links = false; 
      var omhoog = false; 
      var speed = 0.5; 
      var posX = 0; 
      var posY = 0; 
      var lifeCycle = 1; 

      // 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++){  

      triangle[i].x = posX; 
      triangle[i].y = posY; 

       switch (lifeCycle) { 
       case 1: 
        posX += speed; 
        if (posX >= canvas.width) { 
         lifeCycle = 2; 
        } 
        break; 
       case 2: 
        posY += speed; 
        if (posY >= canvas.height) { 
         lifeCycle = 3; 
        } 
        break; 
       case 3: 
        posX -= speed; 
        if (posX <= 0) { 
         lifeCycle = 4; 
        } 
        break; 
       case 4: 
        posY -= speed; 
        if (posY <= 0) { 
         lifeCycle = 1; 
        } 
        break; 
       } 
       triangle[i].draw(context); 
      }   

      }()); 
    }; 

Answer 2

簡単な方法はinputと変更値を追加します。.. ... 次にJavascript

var triangle=document.querySelector('#triangle'); 

triangle.addEventListener('change',function(e){ 
    aantal = this.value 
});