无法读取undefined的属性

-1

我制作了一个有17个球的程序，然后用户键入他想要查看的球的数量。之后，该程序应该在该特定号码的屏幕上生成随机数字球。例如。如果用户说他想看到5个球，他只能输入5和5个球或者显示不同的数字。但问题是，输出不正确，我得到一个错误“无法读取未定义的属性'ID'”。这里是我的代码。我会在代码中提到我发生错误的确切位置。错误前无法读取undefined的属性

<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>

来源

2016-11-07 Mohammad Khawar

在0处开始for循环，并且只在'k Kaiido

现在是得到结果谢谢，但所需的圈数没有出现：/例如，如果我写6我得到4或5，当我输入3我得到2或东西。我如何解决这个问题？ –

这是因为你对第一个循环做了同样的错误：'for（i = 0; i Kaiido

两条线，在您的for循环：

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

应该是这个：

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

否则，最后一次迭代是在balls的最大指数阵列，你得到undefined，而不是像你期望的那样。

来源

2016-11-07 01:55:29 Drown

它仍然不会显示所有需要的圆圈，例如，当我写4时，我得到3个圆圈，有时当我写6我得到4或5个圆圈和这样的事情：/ –

这是一个完整的重写，它的工作原理。我修复了其他问题，例如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>

来源

2016-11-07 02:15:55 ppovoski

谢谢。但是，输出不显示所需的圆圈。如果我输入3我得到1或2，如果我输入6我得到5或4什么的。我该怎么办？：/ –

你并不是每次都选择唯一的随机数。你可以选择数字3两次，只有一个3号球会出现。 – ppovoski

无法读取undefined的属性

回答

相关问题