I'm making a battleship game implementation with HTML/JavaScript. This function is supposed to add the positions of the ships on an HTML table by copying the elements from a 2d array(p1Board) with the positions of the ships.
let displayTable = () => {
document.getElementById("player1turn").hidden = true;
let table = document.getElementById("player1board");
for(var i = 1; i < table.rows.length; i++){
for(var j = 1; j < table.rows.cells; j++){
table.rows[i].cells[j].innerHTML = p1Board[i - 1][j - 1];
}
}
document.getElementById("player1table").hidden = false;
}
document.getElementById("p1start").addEventListener("click", displayTable);
Then, when I open the program on my browser, the table appears but without the positions of the ships: [Battleship Board][1] [1]: https://i.stack.imgur.com/Nv1kA.png
The problem is that you are not specifying the row from which you want to get the cells. Also, once you get the cells, you need to access their .length property.
Change this line
for(var j = 1; j < table.rows.cells; j++)
for this
for(var j = 1; j < table.rows[i].cells.length; j++)