Uncaught TypeError: Cannot read property 'show' of undefined at draw (sketch.js:49)

Question

I am specifying the function show() inside the function Spot() but still I am getting this error of Uncaught TypeError and its saying its undefined at draw().

This is the Javascript code and I am using p5.js as library.

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>

I am getting this error in chrome console and i am running the html as a web server on my local pc.(localhost:8000)

This is the attached image for the error in google chrome console

I have just started with java script and not able to resolve this error despite extensive searching about it.

It would be helpful if someone knows about it. Thanks in advance

Answer 1

Have a look in your setup loop.

In the nested loop, you are increasing the i value, instead of the j value.

And your also counting the rows/columns indexes different in the setup and draw. This might be what you want, just thought I would point it out.

( rows/cols-1 vs 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>