How do I resolve the problem Uncaught Typeerror: Cannot read Property 'Cells' of Undefined in this context?

Question

Here’s the code that says you’re Undefined:

function verifica_pos(row, col){
	//Move para Sul
	if (document.getElementById("table").rows[row - 3].cells[col].innerHTML == count_num - 1) {
		return true;
	}else if (document.getElementById("table").rows[row - 2].cells[col + 2].innerHTML == count_num - 1) { //Move para Sudoeste
		return true;
	}else if (document.getElementById("table").rows[row].cells[col + 3].innerHTML == count_num - 1) { //Move para Oeste
		return true;
	}else if (document.getElementById("table").rows[row + 2].cells[col + 2].innerHTML == count_num - 1) { //Move para Noroeste
		return true;
	}else if (document.getElementById("table").rows[row + 3].cells[col].innerHTML == count_num - 1) { //Move para Norte
		return true;
	}else if (document.getElementById("table").rows[row + 2].cells[col - 2].innerHTML == count_num - 1) {//Move para Nordeste
		return true;
	}else if (document.getElementById("table").rows[row].cells[col - 3].innerHTML == count_num - 1) { //Move para Este
		return true;
	}else if (document.getElementById("table").rows[row - 2].cells[col - 2].innerHTML == count_num - 1) { //Move para Sudeste
		return true;
	}else{
		return false;
	}
}

Where count_num is a variable of type Number that contains a number from 1 to 100.

Answer 1

It turns out that you are trying to access a non-existent element in the table, either a column or a row. For example, if you try to access the property .cells of a .rows will return the error quoted in the question.

The value of the index in .rows must be in the range of 0 to the number of lines -1, that is, if the table has 10 rows, the value within the brackets of .rows[] must be from 0 to 9. For example, if the value of the parameter row of the function for 1, will error right in the first if where you put .rows[row - 3], that will be .rows[1 - 3], resulting in .rows[-2]. The value -2 is not among 0 and 9.

In this case you must do two checks before trying to access the property .innerHTML: check whether the .rows exists and then the .cells, more or less in this scheme:

if(row existe){
   if(coluna existe){
      if(innerHTML == count - 1){
         return true;
      }
   }
}

Note that for each check you would have to do 2 if's until you reach the if accessing the property .innerHTML. Since it’s multiple checks, the code would be too long.

I redid the code in a way that the function verifica_pos returns false in two cases: if the cell does not exist or if the cell exists but the .innerHTML it doesn’t match with count_num - 1.

Behold:

function move(r,c){
   var table = document.getElementById("table");
   var l = table.rows.length;
    if ( r >= 0 && r < l && c >= 0 && c < table.rows[r].cells.length ){
      if(table.rows[r].cells[c].innerHTML == count_num - 1) return true;
   }
   return false;
}

function verifica_pos(row, col){

   var r, c;

    //Move para Sul
   r = row-3, c = col;
   if(move(r,c)) return true;

   //Move para Sudoeste
   r = row-2, c = col+2;
   if(move(r,c)) return true;

   //Move para Oeste
   r = row, c = col+3;
   if(move(r,c)) return true;

   //Move para Noroeste
   r = row+2, c = col+2;
   if(move(r,c)) return true;

   //Move para Norte
   r = row+3, c = col;
   if(move(r,c)) return true;

   //Move para Nordeste
   r = row+2, c = col-2;
   if(move(r,c)) return true;

   //Move para Este
   r = row, c = col-3;
   if(move(r,c)) return true;

   return false;
}