如何再次更新HTML表单变量输入到JavaScript代码，直到用户变量的变化

Question

我通过一个HTML表单，我绘制反弹的墙壁更新圆的半径。然而，圆仅画出什么，我认为是的时间长度的函数运行这是几乎没有的话，就消失了。我将如何让半径的变量等于什么用户输入无限期，直到用户输入查询通过在HTML表单的另一个值更新变量。

我试图限定可变半径为这样：VAR =半径document.querySelector（“＃质量”）值;

无功能，它似乎并没有工作。也许它做一些在函数内的变量的范围，因为我也定义变量“圆”提供的参数绘制在提交函数内的循环。不过我也已经尝试界定外上提交功能。

<canvas> </canvas>

  <script>


        document.addEventListener('DOMContentLoaded', function() {

          var canvas = document.querySelector('canvas')
              ;
          canvas.width = 500;
          canvas.height = 500;
          console.log(canvas);

          var c = canvas.getContext('2d');


          function Circle(x, y, dx, dy, radius) {
            this.x = x;
            this.y = y;
            this.dx = dx;
            this.dy = dy;
            this.radius = radius;

            this.draw = function() {
              c.beginPath();
              c.arc(this.x, this.y, this.radius, 0, Math.PI*2,
                false);
              c.strokeStyle = "black";
              c.stroke();
            }

            this.update = function() {
              if (this.x + this.radius > 500 || this.x - this.radius 
               < 0) {
                this.dx =- this.dx;

              }

              if (this.y + this.radius > 500 || this.y - this.radius 
              < 0) {
                this.dy =- this.dy
              }

              this.x += this.dx;
              this.y += this.dy;

              this.draw();
            }
          }


           document.querySelector('#form').onsubmit= function(){

            radius = document.querySelector('#mass').value;
            circle = new Circle(250, 100, 5, 5, radius);
          };

          function animate() {
            requestAnimationFrame(animate);
            c.clearRect(0, 0, 500, 500);

            circle.update();

          }

          animate();

        });


    </script>

    <div style="text-align:center">
        <form id="form" method="post">
            <input id="mass" type="number" name="mass" value="mass" 
             placeholder="mass"/>
            <button type="submit" class="w3-dark-gray w3- 
             button">Solve</button>
        </form>
    </div>

我的最终目标是使半径已经由用户通过HTML形式和用于圆被定义当用户再次与半径不同的值输入的形式在半径尺寸改变后的圆的动画来运行。然而，在这一点上的圆仅与作为表单提交一个微小的瞬间预期半径绘制。

Answer 1

尝试在按一下按钮，崩溃之前运行了一下。

document.getElementById('btn').addEventListener('click', function() {

          var canvas = document.querySelector('canvas')
              ;
          canvas.width = 500;
          canvas.height = 500;
          console.log(canvas);

          var c = canvas.getContext('2d');


          function Circle(x, y, dx, dy, radius) {
            this.x = x;
            this.y = y;
            this.dx = dx;
            this.dy = dy;
            this.radius = radius;

            this.draw = function() {
              c.beginPath();
              c.arc(this.x, this.y, this.radius, 0, Math.PI*2,
                false);
              c.strokeStyle = "black";
              c.stroke();
            }

            this.update = function() {
              if (this.x + this.radius > 500 || this.x - this.radius 
               < 0) {
                this.dx =- this.dx;

              }

              if (this.y + this.radius > 500 || this.y - this.radius 
              < 0) {
                this.dy =- this.dy
              }

              this.x += this.dx;
              this.y += this.dy;

              this.draw();
            }
          }



            let radius = parseInt(document.querySelector('#mass').value);
            let circle = new Circle(250, 100, 5, 5, radius);


          function animate() {
            requestAnimationFrame(animate);
            c.clearRect(0, 0, 500, 500);

            circle.update();

          }

          animate();

        });

<canvas> </canvas>


    <div style="text-align:center">
        <form id="form" method="post">
            <input id="mass" type="number" name="mass" value="mass" 
             placeholder="mass"/>
            <button id="btn" type="submit" class="w3-dark-gray w3- 
             button">Solve</button>
        </form>
    </div>