javascript点击事件目标图像显示

Question

在下面的示例代码中，将在鼠标单击时放置X或O。我想把它变成一个图像。positive.png表示X, negative.png表示O我该如何修改呢?

var tabelKolommen = document.querySelectorAll('td') 
var aanDeBeurt = 1;
tabelKolommen.forEach(function(td) {
td.addEventListener('click', doeIetsMetKolom);
})
function doeIetsMetKolom(event) {
console.log(event.target);

if(event.target.textContent == "X" || event.target.textContent == "O" ) {
console.log('al bezet!');
} else {
if(aanDeBeurt == 1) {
event.target.textContent = "X";
aanDeBeurt = 2;
} else {
event.target.textContent = "O";
aanDeBeurt = 1;
}
}
}

Answer 1

您可以在元素上切换一个类，或者您可以为单元格分配一个数据属性。我会选择分配一个数据属性，因为这会将JavaScript从表示层(CSS)中分离出来。

const players = ['O', 'X'];
let turn = 0;
const getCurrentPlayer = () => players[turn % players.length];
const onCellClick = ({ target }) => {
if (!target.dataset.player) {
target.dataset.player = getCurrentPlayer();
turn++;
}
}
document.querySelectorAll('.tic-tac-toe .cell').forEach(cell =>
cell.addEventListener('click', onCellClick));

html, body {
width: 100%;
height: 100%;
margin: 0;
padding; 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.tic-tac-toe {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.cell {
width: 32px;
height: 32px;
border: thin solid grey;
cursor: pointer;
}
.cell[data-player="O"] {
background-image: url('https://via.placeholder.com/32/DFD/000?text=O');
cursor: not-allowed;
}
.cell[data-player="X"] {
background-image: url('https://via.placeholder.com/32/FDD/000?text=X');
cursor: not-allowed;
}

<div class="tic-tac-toe">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>

Answer 2

var oImage = document.createElement('img');
oImage.src = '/link-to-O-image.png';
var xImage = document.createElement('img');
xImage.src = '/link-to-X-image.png';
var tabelKolommen = document.querySelectorAll('td') 
var aanDeBeurt = 1;
tabelKolommen.forEach(function(td) {
td.addEventListener('click', doeIetsMetKolom);
})
function doeIetsMetKolom(event) {
console.log(event.target);

if(event.target.textContent == "X" || event.target.textContent == "O" ) {
console.log('al bezet!');
} else {
if(aanDeBeurt == 1) {
event.target.append(xImage);
aanDeBeurt = 2;
} else {
event.target.append(oImage);
aanDeBeurt = 1;
}
}
}