Javascript 单击后尝试更改单元格图像，单击后不会更改_Javascript_Html

Javascript 单击后尝试更改单元格图像，单击后不会更改

javascript html

Javascript 单击后尝试更改单元格图像，单击后不会更改,javascript,html,Javascript,Html,我试图改变细胞上的img一旦我点击它，但这不会发生，一个解释和解决方案将是很好的我正在手动设置gBoard[0][0]。将标记为true，然后单击单元格，img不会更改 html <!DOCTYPE html> <html> <head> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="ie=edge"

我试图改变细胞上的img一旦我点击它，但这不会发生，一个解释和解决方案将是很好的

我正在手动设置gBoard[0][0]。将标记为true，然后单击单元格，img不会更改

html

<!DOCTYPE html>
<html>
<head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>Document</title>
    <link href="css/game.css" rel="stylesheet">
</head>
<body onload="init()">
    <h1>Welcome to minesweeper</h1>
    <div class="board-container"></div><button class="restart-Btn" onclick="restartGame(this)">restartGame</button> 
    <script src="js/utils.js">
    </script> 
    <script src="js/game.js">
    </script>
</body>
</html>


文件
欢迎来到扫雷舰
餐馆游戏

脚本

const TILE = '<img src="/img/tile.png" >'
const TWO = '<img src="/img/2.png" >'

function printMat(mat, selector) {
    var strHTML = '<table border="1"><tbody>';
    for (var i = 0; i < mat.length; i++) {
        strHTML += '<tr>';
        for (var j = 0; j < mat[0].length; j++) {
            var className = `cell-${i}-${j}`
            strHTML +=
                `<td class="${className}" 
              onclick="cellClicked(this, ${i}, ${j})">
                <img src="${mat[i][j].image}" >
            </td>`
        }
        strHTML += '</tr>'
    }
    strHTML += '</tbody></table>';
    var elContainer = document.querySelector(selector);
    elContainer.innerHTML = strHTML;
}

function createBoard(size) {
    var board = []
    for (var i = 0; i < size; i++) {
        board[i] = []
        for (var j = 0; j < size; j++) {
            board[i][j] = creatCell()
        }
    }
    return board
}

function creatCell() {
    return {
        isBomb: false,
        isFlagged: false,
        isClicked: false,
        isOpen: false,
        image: "/img/tile.png"
    }
}
function cellClicked(elCell, i, j) {

    if (gBoard[i][j].image === TILE && gBoard[i][j].isFlagged === true) {

        elCell.innerHTML = TWO
    }
}

const TILE=''
常数二=“”
功能打印垫（垫、选择器）{
var strHTML=''；
对于（变量i=0；i

确保正在控制台中调用该函数

没有HTML，我不能确定这就是问题所在，但我有一个图像不更新的问题，但后来我发现我必须通过添加时间戳来“强制刷新”图像

也许可以试试：

function cellClicked(elCell, i, j) {
    if (gBoard[i][j].image === TILE && gBoard[i][j].isFlagged === true) {
        var timestamp = new Date().getTime();
        elCell.innerHTML = TWO + '?' + timestamp
    }
}

如果您签出

cellClicked（）

函数，则第一次比较不正确

TILE

保存一个包含整个

属性的字符串，因此此比较：
gBoard[i][j].image === TILE

真的是比较：
'<img src="/img/tile.png" >' === '/img/tile.png'

然后在cellClicked（）
中的条件中，针对以下内容进行测试：
if (gBoard[i][j].image === tileSrc && gBoard[i][j].isFlagged === true)

你可以看到它在这里工作：
你能分享一点相关的HTML吗？HTML只有一个div容器来将矩阵推入我想一些东西可以显示这些函数的调用位置以及像elCell这样的东西的值是什么，或者一个JSFIDLE或者一些我们可以使用的例子printmat函数，我在每个单元格中添加一个onclick，onclick返回我单击的元素和位置“HTML:Document Welcome to Mineswipper restartGame”
if (gBoard[i][j].image === tileSrc && gBoard[i][j].isFlagged === true)