In the example code below, an X or an O is going to be placed on a mouse click. I want to change this to an image. positive.png for the X and negative.png for the O How can I modify this?
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;
}
}
}
You can either toggle a class on the element, or you can assign a data attribute to the cell. I would go with assigning a data attribute, because this separates the JavaScript from the presentation (CSS) layer.
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>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;
}
}
}