Question

First time asking a question here.

I have two simple Javascript functions that 1. Generates a random letter, and 2. Populates a 10×10 table with a single letter in each cell. The main function that creates the table is called through a simple HTML button with an onclick and it looks like this:

function BGen()
{
    var board = "<table border='0' width='300' cellpadding='3'>";
    for (h = 1; h <= 10; h++) {
        board = board + "<tr>";
        for (v = 1; v <= 10; v++) {
            board = board + "<td>" + RLGen() + "</td>";
        }
        board = board + "</tr>";
    }
    board = board + "</table>";
    document.write(board);
}

For some reason, when the button is clicked, the table is generated as it should be, but the browser is left sitting on “Connecting…” afterward, as if it’s waiting for something else.

Can anybody possibly shed some light on this? I haven’t a clue why it’s doing so.

Thanks in advance.

Answer 1

You should not use document.write after the page load. That is bad practice.

You should be using either innerHTML or appendChild to add the new elements.