I could not get table dynamically in the same page in JavaScript when I click on different sizes of table button like 3*3 ,5*5

Question

function boardSize() {
  var rows = 3;

  var cols = 3;
  document.write("   <table>   ");
  for (i = 0; i < rows; i++) {
    document.write("<tr>");

    for (j = 0; j < cols; j++) {
      var btncolo;
      var btnarr = ["red", "blue", "yellow"];
      var x = Math.floor((Math.random() * 3) + 1);
      btncolo = btnarr[x - 1];

      var stringArray = ["<td><input type='button' style=backgroundcolor:'", btncolo, "' onclick='hitheadr('id')'>  </td>"];
      document.write(stringArray.join(""));
    }
    document.write("</tr>");
  }
  document.write("    </table>");
}

I have been trying with this for displaying table in the same page but I could not get the result.

I know the reason that I am using document.write() gives the result in other page.

What can I use to get the desired result?

Answer 1

You could create DOM elements and append it to the body, instead of writing it to the document, possibly after loading the page, which leads to strange results.

Some helpful methods:

• document.createElement for creating elements, like table, tr, td, button
• document.createTextNode for a simple text
• Node.appendChild this add the node to the end of a parent node

function hitheadr(id) {
    return function () {
        console.log(id);
    };
}

function createTable(rows, cols, element) {
    function getButtonId(i, j) {
        return 'button' + i + '|' + j
    }

    var table = document.createElement('table'),
        tr, td, button, i, j,
        colors = ["red", "blue", "yellow"];

    for (i = 0; i < rows; i++) {
        tr = document.createElement('tr');
        for (j = 0; j < cols; j++) {
            td = document.createElement('td');
            button = document.createElement('button');
            button.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            button.appendChild(document.createTextNode(getButtonId(i, j)));
            button.onclick = hitheadr(getButtonId(i, j));
            button.id = getButtonId(i, j);
            td.appendChild(button);
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
    element.appendChild(table);
}

createTable(3, 3, document.body);