title: Cannot set property "color" of undefined
body: <p>I'm trying to make a simple candyCrush-like game but I keep getting this error and don't know what to do.</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot set property 'color' of undefined
        at testForClick (numbercrunch2.html:50)
        at update (numbercrunch2.html:62)         </p>
  </blockquote>
  
  <p>To recreate the error just put some numbers into the text boxes, hit the starting button and click on a random tile. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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 &lt; tilesX; i++) {
      numb[i] = [];
      for (var j = 0; j &lt; 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) &lt;= mousepos.x &amp;&amp; space + y * (tilesWidthY + space) &lt;= mousepos.y &amp;&amp; (x + 1) * (tilesWidthX + space) &gt;= mousepos.x &amp;&amp; (y + 1) * (tilesWidthY + space) &gt;= mousepos.y) {
      numb[x][y].color = "green"; //line 50
    }
  }
  
  function drawTile(x, y) {
  
  }
  
  function update() {
    for (var i = 0; i &lt; 9; i++) {
      numb[i] = [];
      for (var j = 0; j &lt; 9; j++) {
        testForClick(i, j);
        drawTile(i, j);
      }
    }
  }
  setInterval(update, 300);
  
  function mouseposition(e) {
  
  }
  document.getElementById("canvas").addEventListener("click", function(e) {
    mousepos.x = e.clientX;
    mousepos.y = e.clientY;
  }, false);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" height="600" width="600"&gt;&lt;/canvas&gt;
  &lt;form name="formname"&gt;
    Rows: &lt;input type="text" name="rows"&gt; Columns: &lt;input type="text" name="columns"&gt;
    &lt;input type="button" value="Start" onClick="init(this.form.rows.value, this.form.columns.value)"&gt;
  &lt;/form&gt;
  &lt;div id="t"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>