I'm facing an issue with a 2D array, cells, which stores cellData values. There's a JavaScript function called displayTable that I use to present this array as a table. The problem arises when clicking on a cell – its cellType is supposed to change to "start", and upon redrawing the table immediately, its color should also change accordingly. However, the cell's color remains unchanged.
function CellData(cellType) {
this.cellType = cellType;
this.crowFlyDistance = Number.Infinity;
this.backtrack = null;
}
function displayTable() {
var table = document.createElement('table');
var tableBody = document.createElement('tbody');
for (var row = 0; row < rowAndColumnSize; row++) {
var rowToAppend = document.createElement('tr');
for (var column = 0; column < rowAndColumnSize; column++) {
var cellToAppend = document.createElement('td');
cellToAppend.className = "baseCell";
cellToAppend.className += " " + cells[row][column].cellType;
cellToAppend.addEventListener("click", clicked);
rowToAppend.appendChild(cellToAppend);
}
tableBody.appendChild(rowToAppend);
}
table.appendChild(tableBody);
document.getElementById("space").appendChild(table);
}
Initially, the clicked function is linked to selectStart. Once the user chooses a start location on the table, the clicked function should clear the table using clearTable and then call displayTable to update the table's values.
function selectStart() {
var row = this.parentNode.rowIndex;
var column = this.cellIndex;
if (cells[row][column].cellType == "empty") {
cells[row][column].cellType = "start";
clearTable();
displayTable();
clicked = selectEnd();
alert("Select an end location.");
} else
alert("Select a cell that is empty.");
}
function clearTable() {
var tableDiv = document.getElementById("space");
while (div.firstChild) {
div.removeChild(div.firstChild);
}
}
Each cell has different styles defined by its class, so when a cell is clicked, its color should change. Nonetheless, I'm experiencing an issue where the clicked cell retains its original color. Even setting the text of each cell to show its cellType results in it showing up as empty. Strangely, if I click on the same cell consecutively, the "Select an empty cell" alert pops up, suggesting that the cells.cellType value has been updated. Am I missing something in how I'm updating my table?