TicTacToe Game in javascript error

Question

Hi I am a newbie in javascript and was trying to program a Tic Tac Toe game using pure javascript..I have implemented most of the part,but am getting stuck up while trying to figure out the winning combination..

I want to check the innerHtml after player has clicked on the element and want check if the sequence matches,So that I can declare a winner..

In doing so I have failed..The below is the code I have written:-

var tile = function(r,c){
  this.row = r;
  this.col = c;

};

var player = function(name, sign){
  this.name = name;
  this.sign = sign
};
var players =[];
players[0]= new player('Surya','X');
players[1]= new player('Darshan','0');
var playerCounter=0;

var board = function(){
  this.tiles =[];
  //create tic and toe tile array
  this.init = function(){
    for(var i = 0; i<3; i++)
      for(var j=0; j<3; j++)
        this.tiles.push(new tile(i,j));
  };
  //Draw the tic tac toc board
  this.drawBoard = function(){
    var boardDiv = document.createElement('div');
    boardDiv.className = 'board';
    boardDiv.setAttribute('id','board');
    var row=0;
    var rowDiv= [];
    for(var i = 0; i<3; i++)
    {
      rowDiv[i] = document.createElement('div');
      rowDiv[i].className = 'row';      
    }
    //9 tiles
    for(var i = 0; i<this.tiles.length; i++)
    {
      var tileDiv = document.createElement('span');
      tileDiv.className = 'tile';
      tileDiv.setAttribute('id','tile['+i+']');
      tileDiv.setAttribute('data-row',this.tiles[i].row);
      tileDiv.setAttribute('data-col',this.tiles[i].col);
      tileDiv.addEventListener('click',function(){
        this.innerHTML = players[playerCounter].sign;
        playerCounter= 1- playerCounter;
      });
      rowDiv[row].appendChild(tileDiv);
      if(i==2 || i==5 || i==8)
        row++;
    }    
    for(var i = 0; i<3; i++)
    {
      boardDiv.appendChild(rowDiv[i]);
    }
    document.body.appendChild(boardDiv);


    this.checkWinner = function(tile,players){

       for(var z=0;z<=1;z++){

        if(tile[0].innerHTML == players[z].sign && <------ Getting Error Here
          tile[1].innerHTML == players[z].sign &&
          tile[2].innerHTML == players[z].sign)
          return true;

        if(tile[3].innerHTML == players[z].sign &&
          tile[4].innerHTML == players[z].sign &&
          tile[5].innerHTML == players[z].sign)
          return true;

        if(tile[6].innerHTML == players[z].sign &&
          tile[7].innerHTML == players[z].sign &&
          tile[8].innerHTML == players[z].sign)
          return true;

        if(tile[0].innerHTML == players[z].sign &&
          tile[3].innerHTML == players[z].sign &&
          tile[6].innerHTML == players[z].sign)
          return true;

        if(tile[1].innerHTML == players[z].sign &&
          tile[4].innerHTML == players[z].sign &&
          tile[7].innerHTML == players[z].sign)
          return true;

        if(tile[2].innerHTML == players[z].sign &&
          tile[5].innerHTML == players[z].sign &&
          tile[8].innerHTML == players[z].sign)
          return true;

        if(tile[0].innerHTML == players[z].sign &&
          tile[4].innerHTML == players[z].sign &&
          tile[8].innerHTML == players[z].sign)
          return true;

        if(tile[2].innerHTML == players[z].sign &&
          tile[4].innerHTML == players[z].sign &&
          tile[7].innerHTML == players[z].sign)
          return true;

           else
               console.log("outside");
       }
    }; 


    isGameOver = this.checkWinner(2,1);

    console.log(isGameOver)

  };




};

var myBoard = new board();
myBoard.init();
myBoard.drawBoard();
myBoard.checkWinner();

I have pointed out where I am getting the error.When trying to find the value of innerHtml am getting error..which is Cannot read property 'sign' of undefined

Please help me out

Possible duplicate of [Detecting an undefined object property](http://stackoverflow.com/questions/27509/detecting-an-undefined-object-property) — Orel Eraki, Nov 18 '15 at 18:43
this.checkWinner is getting a players value of 1 when you call from isGameOver, and then you try to do players[z] wich means 1[0] which throws an error, you are trying to access your player array but you defined players as a function parameter. Same with tile parameter, myBoard.checkWinner() is not sending anything, so both are undefined — juvian, Nov 18 '15 at 18:45
I think you want to delete the parameters coming into `this.checkWinner`, and within that function use the `board` object's own `this.tiles` array, and the global `players` variable. — James, Nov 18 '15 at 19:17
@James I tried what you said but am getting Cannot read property '0' of undefined — , Nov 18 '15 at 19:30
Oh right, I was thinking this.tiles contained an array of the tile divs. I would set a reference in `this.drawBoard`, after the appendChild line `this.tiles[i].div = tileDiv;`, then in your checkWinner func check `if (this.tiles[0].div.innerHTML = blah blah)` etc. — James, Nov 18 '15 at 22:04

score 0 · Answer 1 · answered Nov 18 '15 at 19:16

You have to pass the parameters to the function checkWinner: tile, players when you call the function.

var tile = new Tile(0,1);
var player = new player('jiraya','X');
var myBoard = new board();
myBoard.init();
myBoard.drawBoard();
myBoard.checkWinner(tile, player);

TicTacToe Game in javascript error

1 Answers1