How to insert object in div using JavaScript?

Question

I am making Snake and Ladder game using JavaScript. I want to insert the game board generated from the create Board(dimension) function into a div, but [object Object] is what is appears.

var gameBoard = {
  createBoard: function(dimension) {
    if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
      return false;
    } else {
      dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
      var table = document.createElement('table'),
        row = document.createElement('tr'),
        cell = document.createElement('td'),
        rowClone,
        cellClone;
      var output;
      for (var r = 0; r < dimension; r++) {
        rowClone = row.cloneNode(true);
        table.appendChild(rowClone);
        for (var c = 0; c < dimension; c++) {
          cellClone = cell.cloneNode(true);
          rowClone.appendChild(cellClone);
        }
      }
      document.body.appendChild(table);
      output = gameBoard.enumerateBoard(table);
    }
    return output;
  },
  enumerateBoard: function(board) {
    var rows = board.getElementsByTagName('tr'),
      text = document.createTextNode(''),
      rowCounter = 1,
      size = rows.length,
      len,
      cells,
      real,
      odd = false,
      control = 0;
    for (var r = size - 1; r >= 0; r--) {
      cells = rows[r].getElementsByTagName('td');
      len = cells.length;
      rows[r].className = r % 2 == 0 ? 'even' : 'odd';
      odd = ++control % 2 == 0 ? true : false;
      size = rows.length;
      for (var i = 0; i < len; i++) {
        if (odd == true) {
          real = --size + rowCounter - i;
        } else {
          real = rowCounter;
        }
        cells[i].className = i % 2 == 0 ? 'even' : 'odd';
        cells[i].appendChild(text.cloneNode());
        cells[i].firstChild.nodeValue = real;
        rowCounter++;
      }
    }
    return gameBoard;
  }
};
//board.createBoard(10);
document.getElementById("div1").innerHTML = gameBoard.createBoard(10);

td {
  border-radius: 10px;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border: 0px solid #FFFFFF;
}
table tr:nth-child(odd) td:nth-child(even),
table tr:nth-child(even) td:nth-child(odd) {
  background-color: PowderBlue;
}
table tr:nth-child(even) td:nth-child(even),
table tr:nth-child(odd) td:nth-child(odd) {
  background-color: SkyBlue;
}
td:hover {
  background: LightCyan !important;
  cursor: pointer;
}

I need help on how to solve this problem. Thanks in advance.

zer00ne · Accepted Answer

All you wanted was the gameBoard to be appended to the div#div1, correct?

Added mount parameter to createBoard() function
var mount is a selector that will be referenced as the element to which the table element will be appended to.
Comments accompany changes in the code.
I added a border around #div1 to show that the gameBoard has been successfully appended to #div1

var gameBoard = { //===============▼---▼====[This is can be any selector]
  createBoard: function(dimension, mount) {
    //==▼------------------------------------▼====[Object mount]  
    var mount = document.querySelector(mount);
    if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
      return false;
    } else {
      dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
      var table = document.createElement('table'),
        row = document.createElement('tr'),
        cell = document.createElement('td'),
        rowClone,
        cellClone;
      var output;
      for (var r = 0; r < dimension; r++) {
        rowClone = row.cloneNode(true);
        table.appendChild(rowClone);
        for (var c = 0; c < dimension; c++) {
          cellClone = cell.cloneNode(true);
          rowClone.appendChild(cellClone);
        }
      }
      //▼---------------------▼====[Object table append to Object mount] 
      mount.appendChild(table);
      output = gameBoard.enumerateBoard(table);
    }
    return output;
  },
  enumerateBoard: function(board) {
    var rows = board.getElementsByTagName('tr'),
      text = document.createTextNode(''),
      rowCounter = 1,
      size = rows.length,
      len,
      cells,
      real,
      odd = false,
      control = 0;
    for (var r = size - 1; r >= 0; r--) {
      cells = rows[r].getElementsByTagName('td');
      len = cells.length;
      rows[r].className = r % 2 == 0 ? 'even' : 'odd';
      odd = ++control % 2 == 0 ? true : false;
      size = rows.length;
      for (var i = 0; i < len; i++) {
        if (odd == true) {
          real = --size + rowCounter - i;
        } else {
          real = rowCounter;
        }
        cells[i].className = i % 2 == 0 ? 'even' : 'odd';
        cells[i].appendChild(text.cloneNode());
        cells[i].firstChild.nodeValue = real;
        rowCounter++;
      }
    }
    return gameBoard;
  }
};
/*board.createBoard(10);
[On window load call createBoard with 10 rows and mount it to #div1]
▼----------------------------▼===============================*/
window.onload = (function(e) {
  gameBoard.createBoard(10, '#div1');
});

td {
  border-radius: 10px;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border: 0px solid #FFFFFF;
}
table tr:nth-child(odd) td:nth-child(even),
table tr:nth-child(even) td:nth-child(odd) {
  background-color: PowderBlue;
}
table tr:nth-child(even) td:nth-child(even),
table tr:nth-child(odd) td:nth-child(odd) {
  background-color: SkyBlue;
}
td:hover {
  background: LightCyan !important;
  cursor: pointer;
}
#div1 {
  border: 3px inset #0FF; 
  border-radius: 10px;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

How to insert object in div using JavaScript?

Answers (1)

Related Questions