HTML / JS problem with table cells and their IDs

Question

Hi guys, I've a problem I cannot solve. My web game is set in a 4x4 table. The first 15 cells look like this: <td id="number from 1 to 15" onclick="a JS/jQuery function"><div class="some name"><svg>mostly lines and polylines</svg></div></td> and the last one is just <td id="16" onclick="the same function"></td>. The first 15 cells are good - the function gets their IDs right. But when I click on the one that's empty the function finds its ID is the same as the cell to its left (only ok if it's the 1st cell)

Answer 1

I just found out this applies for cells that are right above the empty one. So, if the empty cell is the first one in a row it will copy the ID of the cell above it. For example, if its ID should be 9 (the first cell of the 3rd row) the function gets 5 as its ID.

Answer 2

It's probably due of the specific behaviour of empty cells, which are not displayed in most of context...
Try to workaround by putting invisible content inside:

<td id="16" onclick="...">&nbsp;</td>

... or:

<td id="16" onclick="..."><br></td>

Answer 3

Nope guys, those methods aren't working, it still copies the ID of the neighbor cell...

Answer 4

Yeah, sure

https://code.sololearn.com/WtK0DgyP2LMz/?ref=app

Answer 5

svg{
max-width: 100%
}

or

.piece{
overflow:hidden;
}

Answer 6

That's it, thank you!

Answer 7

maybe you can set id like "#row-#column"

for example first cell will be
<td id="1-1"></td>

Answer 8

can you show your code?