Question

我制作了一个有17个球的程序，然后用户输入了他想看的球数。之后，程序应该在该特定数字的屏幕上生成随机数球。例如。如果用户说他想要看到5个球他只能输入5个球，那么将显示5个球或不同的数字。但问题是，输出不正确，我收到错误＆＃34;无法读取属性＆＃39; id＆＃39;未定义＆＃34;。这是我的代码。我会在代码中提到我收到错误的确切行。

<html>
<head>
</head>
<script type="text/javascript">
  window.onload=draw;
  function draw(){
    var canvas= document.getElementById('canvas');
    var ctx=canvas.getContext('2d');
    var id;
    var x;
    var y;
    var r;
    var i;
    var balls=[{"id":1,"x":85,"y":90,"r":40},{"id":2,"x":180,"y":90,"r":40},{"id":3,"x":270,"y":90,"r":40},{"id":4,"x":360,"y":90,"r":40},{"id":5,"x":450,"y":90,"r":40},{"id":6,"x":535,"y":90,"r":40},{"id":7,"x":623,"y":90,"r":40},{"id":8,"x":710,"y":90,"r":40},{"id":9,"x":85,"y":190,"r":40},{"id":10,"x":180,"y":190,"r":40},{"id":11,"x":270,"y":190,"r":40},{"id":12,"x":360,"y":190,"r":40},{"id":13,"x":450,"y":190,"r":40},{"id":14,"x":535,"y":190,"r":40},{"id":15,"x":623,"y":190,"r":40},{"id":16,"x":710,"y":190,"r":40},{"id":17,"x":450,"y":190,"r":40},{"id":18,"x":535,"y":190,"r":40},{"id":19,"x":623,"y":190,"r":40},{"id":20,"x":710,"y":190,"r":40}];
    var texts=[];

    for(i=0;i<balls.length;i++){
      texts[i]=i;
    }

    var choose;
    choose=parseFloat(prompt("enter the number of balls u want to see"));
    for (var i=1; i<=choose; i++) {
      var x=Math.floor((Math.random() * choose) + 1);
      for (var k=1; k<=balls.length; k++) {
        var b=balls[k];
        if(b.id==x){                  /*here is the issue*/
          ctx.fillStyle="#800000";
          ctx.strokeStyle="#000000";
          ctx.beginPath();
          ctx.arc(b.x,b.y,b.r,0, 2 * Math.PI);
          ctx.stroke();
          ctx.fill();
          ctx.fillStyle = 'black';
          ctx.fillText(b.id, b.x, b.y);
        }
      }
    }
  }

</script>
<body>
<canvas id="canvas" width="800" height="800" style="border: 2px solid #000000"></canvas>
</body>
</html>

Answer 1

错误之前的两行，在for循环中：

var k=1; k<=balls.length; k++

应改为：

var k=1; k<balls.length; k++

否则，最后一次迭代超过了balls数组的最大索引，你得到undefined而不是你期望的球。

Answer 2

这是一个完整的重写，有效。我修正了其他问题，例如k < balls.length，parseInt而不是parseFloat，并在找到正确的球后找到了循环。

<html>
<head>
</head>
<script type="text/javascript">
  window.onload=draw;
  function draw(){
    var canvas= document.getElementById('canvas');
    var ctx=canvas.getContext('2d');
    var id;
    var x;
    var y;
    var r;
    var i;
    var balls=[{"id":1,"x":85,"y":90,"r":40},{"id":2,"x":180,"y":90,"r":40},{"id":3,"x":270,"y":90,"r":40},{"id":4,"x":360,"y":90,"r":40},{"id":5,"x":450,"y":90,"r":40},{"id":6,"x":535,"y":90,"r":40},{"id":7,"x":623,"y":90,"r":40},{"id":8,"x":710,"y":90,"r":40},{"id":9,"x":85,"y":190,"r":40},{"id":10,"x":180,"y":190,"r":40},{"id":11,"x":270,"y":190,"r":40},{"id":12,"x":360,"y":190,"r":40},{"id":13,"x":450,"y":190,"r":40},{"id":14,"x":535,"y":190,"r":40},{"id":15,"x":623,"y":190,"r":40},{"id":16,"x":710,"y":190,"r":40},{"id":17,"x":450,"y":190,"r":40},{"id":18,"x":535,"y":190,"r":40},{"id":19,"x":623,"y":190,"r":40},{"id":20,"x":710,"y":190,"r":40}];

    var choose;
    choose=parseInt(prompt("enter the number of balls u want to see"));

    var randomlySelectedBalls = [];
    var i = 0;
    while (i < choose){
      var x = Math.floor((Math.random() * (balls.length + 1)));
      if( randomlySelectedBalls.indexOf(x) === -1) {
        randomlySelectedBalls.push(x);
        for (var k=0; k<balls.length; k++) {
          var b=balls[k];
          if(b.id==x){                  /*here is the issue*/
            ctx.fillStyle="#800000";
            ctx.strokeStyle="#000000";
            ctx.beginPath();
            ctx.arc(b.x,b.y,b.r,0, 2 * Math.PI);
            ctx.stroke();
            ctx.fill();
            ctx.fillStyle = 'black';
            ctx.fillText(b.id, b.x, b.y);
            break;
          }
        }
        i++;
      }
    }
  }

</script>
<body>
<canvas id="canvas" width="800" height="800" style="border: 2px solid #000000"></canvas>
</body>
</html>

无法读取未定义的属性

2 个答案: