cannot set property "color" of undefined

I'm trying to make a simple candyCrush-like game but I keep getting this error and don't know what to do.

Uncaught TypeError: Cannot set property 'color' of undefined at testForClick (numbercrunch2.html:50) at update (numbercrunch2.html:62)

here is the important part of my code:

        var c = document.getElementById("canvas");
        var ctx = c.getContext("2d");

        var tilesX = 0,tilesY = 0,tilesWidthX,tilesWidthY, space = 3;
        var numb = [];

        var mousepos = {x:0, y:0}, click = false;

        function init(rows, cols) {
            tilesWidthX = (canvas.height - rows * 3) / rows;
            tilesWidthY = (canvas.height - cols * 3) / cols;
            tilesX = rows;
            tilesY = cols;
            for (var i = 0;i < tilesX;i++) {
                numb[i] = [];
                for ( var j = 0;j < tilesY;j++) {
                    numb[i][j] = {val: 1 + Math.round(Math.random()*6), color: "grey"};

                    ctx.beginPath();
                    ctx.fillStyle = numb[i][j].color;
                    ctx.fillRect(space + i * (tilesWidthY + space), space + j * (tilesWidthX + space), tilesWidthY, tilesWidthX);
                    ctx.closePath();

                    ctx.beginPath();
                    ctx.fillStyle = "white";
                    ctx.font = "20px Arial";
                    ctx.fillText(numb[i][j].val,15 + i * (tilesWidthY + space), 30 + j * (tilesWidthY + space),50);
                    ctx.closePath();
                }
            }
        }

        function testForClick(x, y) {
            if (space + x * (tilesWidthX + space) <= mousepos.x && space + y * (tilesWidthY + space) <= mousepos.y && (x+1) * (tilesWidthX + space) >= mousepos.x && (y+1) * (tilesWidthY + space) >= mousepos.y) {
                numb[x][y].color = "green"; //line 50
            }
        }