Javascript Object turns to undefined when accessing property

Question

I'm making an html5 javascript game(not with canvas) and I need one class for my objects. The class is DPixel, and all the objects are stored in an array called grid . Here is the class:

var grid = new Array();
function DPixel(data, x, y, node) {
    this.xpos = x;
    this.ypos = y;
    this.elem = node;
    this.type = data[0];
    /*The pixel will transfer colors as normal*/
    if (this.type === "normal") {
        this.type = "normal";
        this.red = data[1];
        this.green = data[2];
        this.blue = data[3];
    }
    /*The pixel will not transfer colors to other pixels*/
    else if (this.type === "border") {
        this.type = "border";
        this.red = 224;
        this.green = 210;
        this.blue = 54;
    }
}

The actual population of the array is in the setup function which does get called, I've tested and everything is fine in there.

function setup() { for(var x = 0; x < gridSize; x++) { for(var y = 0; y < gridSize; y++) { var red = Math.floor(Math.random()*256); var green = Math.floor(Math.random()*256); var blue = Math.floor(Math.random()*256); totalRed += red; totalGreen += green; totalBlue += blue; $("#grid").append("<div></div>"); $("#grid div:nth-child(" + (x * gridSize + y + 1) + ")").css("background-color", "rgb(" + red + "," + green + "," + blue + ")"); grid[grid.length] = (new DPixel(["normal", red, green, blue], x, y, $("#grid div:nth-child(" + (x * gridSize + y + 1) + ")"))); } } }

And the error I get from chrome is: "Uncaught TypeError: Cannot read property 'type' of undefined" in my update method which runs a few times per second.

function update() {
    console.log("update is working");
    //Update each DPixel
    var rotations = 0;
    for(var x = 0; x < gridSize; x++) {
        for(var y = 0; y < gridSize; y++) {
            var dpixel = grid[x * gridSize + y + 1];
            var pixelType = dpixel.type; //The error is here
            var red = grid[x * gridSize + y + 1].red;
            var green = grid[x * gridSize + y + 1].green;
            var blue = grid[x * gridSize + y + 1].blue;
            rotations++;
        }
    }
    $("#equalized").html(equalized);
    $("#equalPercent").html(  (equalized / (gridSize*gridSize))*100   );
    updateID = setTimeout(update, $("input[type='range']").val());
}

I have tried console.log() on the dpixel variable, and chrome printed all of its properties as it normally would. But when I try to access a property it gives me the error. This may seem really obvious to someone, but I must have skipped over something when I spent hours debugging so don't feel shy!

Answer 1

I have found the little glitch. As usual it is in my weakness, math. On the lines where I define the dpixel and color variables I do not need to add 1 to the index. My array already stores variables with indexes 0-224 by default so having a 0 based loop is ok. I suspected the last element was giving me the error but I could not prove it despite me logging every element to check if it was undefined.