未捕获的类型错误：无法在绘图时读取未定义的属性“显示”（sketch.js：49）

Posted 2023-03-07

【中文标题】未捕获的类型错误：无法在绘图时读取未定义的属性“显示”（sketch.js：49）

【英文标题】：Uncaught TypeError: Cannot read property 'show' of undefined at draw (sketch.js:49)

【发布时间】：2020-08-31 06:28:39

【问题描述】：

我在函数 Spot() 中指定了函数 show()，但我仍然收到 Uncaught TypeError 这个错误，并且它在 draw() 处说它未定义。

这是 javascript 代码，我使用 p5.js 作为库。

var cols = 5;
rows = 5;
var grid = new Array(cols);

var w,h;

function Spot(i,j)
    this.x = i;
    this.y = j;
    this.f = 0;
    this.g = 0;
    this.h = 0;

    this.show = function()
        fill(255);
        stroke(0);
        rect(this.x*w,this.y*h,w-1,h-1);
      


function setup()
    createCanvas(400,400);
    console.log('A*');

    w = width/cols;
    h = height/rows;

    for(var i = 0; i < cols;i++)
        grid[i] = new Array(rows);
    

    console.log(grid);
    
    for(var i = 0; i < cols;i++)
    
        for(var j = 0; i < rows;i++)
        
            grid[i][j] = new Spot(i,j);
        
    

function draw()
    background(0);
    
    for(var i = 0; i < cols-1;i++)
    
        for(var j = 0; j < rows-1; j++)
        
            grid[i][j].show();
        
    

    body 
      padding: 0;
      margin: 0;
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/sketch.js/1.1/sketch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>

我在 chrome 控制台中收到此错误，我在本地电脑上将 html 作为 Web 服务器运行。(localhost:8000)

这是 google chrome 控制台中错误的附加图片

我刚开始使用 java 脚本，尽管进行了广泛的搜索，但仍无法解决此错误。

如果有人知道这将是有帮助的。 提前致谢

【问题讨论】：

嗨 Aniket，如果您的 sn-p 可以在浏览器中运行，它真的很有帮助。在 SO 使用 sn-p 函数来包含代码的“运行/失败”版本。您可以包含来自 CDN 的脚本。

【参考方案1】：

看看你的设置循环。

在嵌套循环中，您正在增加 i 值，而不是 j 值。

您还计算setup 和draw 中不同的行/列索引。 这可能是你想要的，只是想我会指出来。

（rows/cols-1 与 cols/rows）

var cols = 5;
var rows = 5;
var grid = new Array(cols);

var w,h;

function Spot(i,j)
    this.x = i;
    this.y = j;
    this.f = 0;
    this.g = 0;
    this.h = 0;

    this.show = function()
        fill(255);
        stroke(0);
        rect(this.x*w,this.y*h,w-1,h-1);
    


function setup()
    createCanvas(400,400);
    console.log('A*');

    w = width/cols;
    h = height/rows;

    for(var i = 0; i < cols;i++)
        grid[i] = new Array(rows);
    

    console.log('grid: ', grid);
    
    for(var i = 0; i < cols-1;i++)
    
        for(var j = 0; j < rows-1;j++)
        
            grid[i][j] = new Spot(i,j);
        
    

function draw()
    background(0);
    
    for(var i = 0; i < cols-1;i++)
    
        for(var j = 0; j < rows-1; j++)
        
            grid[i][j].show();
        
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/sketch.js/1.1/sketch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>

【讨论】：

顺便说一句，克里斯特，Uncaught TypeError 是否意味着仅拼写错误/逻辑语法错误？

简单的答案是“是”。访问由于拼写错误或未正确分配属性的逻辑错误而不存在的属性。