javascript on click event target image display

Question

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;
        }
    }

}

Answer 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>

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;
        }
    }

}