I'm trying to show the element behind the click after its been clicked,the span that holds the value has a hidden class, however upon click nothing happens, the relevant code:
JAVASCRIPT:
function cellClicked(elCell,i,j) {
console.log('Click', i, j);
elCell.classList.remove("hidden")
console.log(elCell);
}
HTML:
function renderBoard(board) {
var strHtml = '';
for (var i = 0; i < gLevel.SIZE; i++) {
strHtml += '<tr>'
for (var j = 0; j < gLevel.SIZE; j++) {
var cell = board[i][j].minesAroundCount
if (board[i][j].isMine === true) {
var className = `cell-${i}-${j} `
strHtml +=
`<td class="${className} " onmouseup="mouseClicked(event,this)"; onclick="cellClicked(this, ${i}, ${j})">
<span class="hidden">${BOMB} </span>
</td>`
} else {
var className = `cell-${i}-${j} `
strHtml +=
`<td class="${className}" onmouseup="mouseClicked(event,this)"; onclick="cellClicked(this, ${i}, ${j})">
<span class="hidden">${cell} </span>
</td>`
}
}
strHtml += '</tr>'
}
var elBoard = document.querySelector('.game');
elBoard.innerHTML = strHtml;
}
CSS:
.hidden{
visibility: hidden;
}