En el código de ejemplo a continuación, se colocará una X o una O con un clic del mouse. Quiero cambiar esto a una imagen. positivo.png para la X y negativo.png para la O ¿Cómo puedo modificar esto?
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; } } }Puede alternar una clase en el elemento o puede asignar un atributo de datos a la celda. Iría con la asignación de un atributo de datos, porque esto separa el JavaScript de la capa de presentación (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>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; } } }