0

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

}
Improve this question
2
  • Provide a class name. Commented May 24, 2022 at 18:17
  • How can I do that? Commented May 24, 2022 at 18:22

2 Answers 2

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

How can I put an image in the javascript? So on the first click image positive.png will apear and the next click negative.png will apear
@HPB the images are stored inside of a CSS rule; based on the attribute value for data-player.
0 
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;
        }
    }

}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.