Issue dynamically generating table

Question

I am making a table using jquery, where the ids of the tiles are generated using a nested FOR loop. I am trying to add and event listener to the tiles, using their ids, so I can run a function when clicking them. However, the id, stored in the variable boatStatusClient is not recognised, and throws an error. Can anyone see the problem?

for (y_client = 1; y_client < 11; y_client++) {
    battlefield_client += "<tr>";
    for (x_client = 1; x_client < 11; x_client++) {
        battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + "><pre>     </pre></td>";
        boatStatusClient = document.getElementById('cell_client_' + x_client + "_" + y_client);
        console.log(boatStatusClient);
        boatStatusClient.addEventListener("click", function(){boatGrid.placeBoat_client()});
    }
    battlefield_client += "</tr>";
}
$(document).ready(function() {
    $("#tableGrid_client").html(battlefield_client); //loads table

what's the error ? because I can see multiple problems in your code. `declare variable before concat` `can not add listner to null element` — Mohit Tanwani, Oct 14 '16 at 12:51
we need to see what `document.getElementById('cell_client_' + x_client + "_" + y_client);` outputs. If it's null, you can't add an event listener. And why half pure JS, half jQuery? — Taha Paksu, Oct 14 '16 at 12:54

score 2 · Answer 1 · edited May 23 '17 at 12:01

2

Looks like your trying to find an element with document.getElementById() that does not exist in the DOM.

First append it to the page then search and add the relevant event listenrs.

But, you should really think of doing it with document.createElement (or jQuery objects) instead of concating strings. See this question for a more in-depth discussion.

edited May 23 '17 at 12:01

Community

1
1

answered Oct 14 '16 at 12:51

fistuks

469
3
5

score 0 · Accepted Answer · answered Oct 14 '16 at 12:56

Look, your event function is executing before of the DOM Element be created!

Try this:

for (y_client = 1; y_client < 11; y_client++) {
    battlefield_client += "<tr>";
    for (x_client = 1; x_client < 11; x_client++) {
        battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + "><pre>     </pre></td>";
    }
    battlefield_client += "</tr>";
}
$(document).ready(function() {
    $("#tableGrid_client").html(battlefield_client); //loads table
    $('.tile').click(function() {
        boatGrid.placeBoat_client();
    });
});

@MaximWebb If the answer solved your problem, mark it as a solution, so that other people are also helped! — JuniorNunes, Oct 23 '16 at 01:14

score 0 · Answer 3 · answered Oct 14 '16 at 12:57

As fistuks already mentioned, you're trying to reach an element that is not yet in the DOM, and therefor you can't get it.

By doing this:

battlefield_client += "<td onclick = '' class = 'tile' style='border: 3px solid black;' id=" + "cell_client_" + x_client + "_" + y_client + "><pre>     </pre></td>";

You only make a string that holds this, but you never insert it into the dom - well at least not before you try to get that actual element.

So what you want to do is: append this string to the view/dom :-) Then you should be able to get it with your above method.

Besides that I would consider placing quotes better, and not mix the use of single- and doublequotes. My suggestion would be to always use single quotes when writing JavaScript, and double quotes when writing html.

Issue dynamically generating table

3 Answers3