GetElementbyId() неправильно получает элементы из моей таблицы ⇐ Javascript

[Anonymous]

У меня есть таблица, представляющая шахматную доску в моем HTML, согласно следующему коду:

Код: Выделить всё

    
{% for row in range(8) %}

{% for col in range(8) %}
{{ 'ABCDEFGH'[col] }}{{ 1+row }}
{% endfor %}

{% endfor %}

Я хочу получить доступ к полям таблицы, чтобы заполнить ее фрагментами для этой функции в js:

Код: Выделить всё

function renderBoard(gameState) {
const chessBoard = document.getElementById("chess-board");
chessBoard.innerHTML = '';  // Clear the board before re-rendering

// Loop through the rows of the board (gameState.board is an 8x8 array)
Object.entries(gameState.board).forEach(([key, pieceData]) => {
const [rowIndex, colIndex] = key.split(',').map(Number);
const squareId = `${'ABCDEFGH'[colIndex]}${1 + rowIndex}`;  // Calculate the cell ID (e.g., A1, B2, ...)
const cellElement = document.getElementById(squareId);  // Get the corresponding  element

console.log(cellElement)

if (cellElement) {
// If there is a piece in this square, add it
if (pieceData && pieceData.type !== null) {
const pieceImage = document.createElement("img");

// Set the piece image based on the type and color
const pieceType = pieceData.type;
pieceImage.src = `static/pieces/${pieceType}.png`;
pieceImage.alt = `${pieceData.color} ${pieceType}`;
pieceImage.classList.add("piece");  // Optional: add CSS class to style the pieces

// Clear any existing piece (in case the square was previously occupied)
cellElement.innerHTML = '';  // Clear previous content

// Append the new piece image to the  element
cellElement.appendChild(pieceImage);
} else {
// If there is no piece, make sure the  is empty
cellElement.innerHTML = '';
}
} else {
console.log(`Error: Could not find element with ID: ${squareId}`);
}
});
}

SquareId вычисляется правильно, но затем элемент cellElement становится нулевым, и я не понимаю, почему
Я пытался реализовать шахматную доску в html без цикл, вручную помещая все tr и td, а также все идентификаторы, чтобы они были на 100% правильными, но все равно это не сработало.
Я пытался получить доступ к идентификаторам td в css с помощью # А1 и так далее. Это сработало, поэтому я знаю, что идентификаторы указаны правильно.
Я пробовал вызывать функции после DOMContentLoades, а также после window.onload, но обе проблемы не решили.
Спасибо за помощь!

Подробнее здесь: https://stackoverflow.com/questions/793 ... m-my-table