时间戳

首页 > 解决方案 > 单击后尝试更改单元格图像，单击后不会更改

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

问题描述

一旦我单击它，我就会尝试更改单元格上的 img，但是这不会发生，解释和解决方案会很好。

我手动将gBoard[0][0].isFlagged设置为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
    }
}

标签： javascripthtml

解决方案

如果你检查cellClicked()函数，第一次比较是不对的。TILE包含一个包含整个<img>元素的字符串，但gBoard[i][j].image只是src属性的值，所以这个比较：

gBoard[i][j].image === TILE

真的在比较：

'<img src="/img/tile.png" >' === '/img/tile.png'

这永远不会是真的。

我通过设置一个新变量让它工作tileSrc：

const TILE = '<img src="/img/tile.png" >'
const tileSrc = '/img/tile.png';

然后在条件 in 中cellClicked()，对此进行测试：

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

你可以在这里看到它的工作原理：Tiles App

推荐阅读