Skip to main content
deleted 23 characters in body; edited tags; edited title
Source Link
200_success
  • 144.2k
  • 22
  • 188
  • 473

javascript JavaScript code already working forto check whether X won a tictactoe game, trying to make it shorter

My code is already doing what I want, so it's functional, now my concern is, if there is a way to make it easier to read or even better and shorter my code, it's supposed to check if 3 'X' or 'O' are continuous in 3 cells in a row, column or diagonal, code for the string 'O' is the same as 'X' only changes classList.contains('targetO'); else is the same. it's a tictactoe game.

    //horizontal X wins
if (td[0].classList.contains ('targetX') && td[1].classList.contains ('targetX') && td[2].classList.contains ('targetX')){ alert('X player Won')}
if (td[3].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[5].classList.contains ('targetX')){ alert('X player Won')};
if (td[6].classList.contains ('targetX') && td[7].classList.contains ('targetX') && td[8].classList.contains ('targetX')){ alert('X player Won')};

//vertical X wins
if (td[0].classList.contains ('targetX') && td[3].classList.contains ('targetX') && td[6].classList.contains ('targetX')){ alert('X player Won')}
if (td[1].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[7].classList.contains ('targetX')){ alert('X player Won')};
if (td[2].classList.contains ('targetX') && td[5].classList.contains ('targetX') && td[8].classList.contains ('targetX')){ alert('X player Won')};

//diagonal X wins

if (td[0].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[8].classList.contains ('targetX')){ alert('X player Won')}
if (td[2].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[6].classList.contains ('targetX')){ alert('X player Won')};

I didmade a fiddle

want to see my fiddle: https://jsfiddle.net/ycedmfn2/

javascript code already working for a tictactoe game, trying to make it shorter

My code is already doing what I want, so it's functional, now my concern is, if there is a way to make it easier to read or even better and shorter my code, it's supposed to check if 3 'X' or 'O' are continuous in 3 cells in a row, column or diagonal, code for the string 'O' is the same as 'X' only changes classList.contains('targetO'); else is the same. it's a tictactoe game.

    //horizontal X wins
if (td[0].classList.contains ('targetX') && td[1].classList.contains ('targetX') && td[2].classList.contains ('targetX')){ alert('X player Won')}
if (td[3].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[5].classList.contains ('targetX')){ alert('X player Won')};
if (td[6].classList.contains ('targetX') && td[7].classList.contains ('targetX') && td[8].classList.contains ('targetX')){ alert('X player Won')};

//vertical X wins
if (td[0].classList.contains ('targetX') && td[3].classList.contains ('targetX') && td[6].classList.contains ('targetX')){ alert('X player Won')}
if (td[1].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[7].classList.contains ('targetX')){ alert('X player Won')};
if (td[2].classList.contains ('targetX') && td[5].classList.contains ('targetX') && td[8].classList.contains ('targetX')){ alert('X player Won')};

//diagonal X wins

if (td[0].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[8].classList.contains ('targetX')){ alert('X player Won')}
if (td[2].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[6].classList.contains ('targetX')){ alert('X player Won')};

I did a fiddle

want to see my fiddle https://jsfiddle.net/ycedmfn2/

JavaScript code to check whether X won a tictactoe game

My code is already doing what I want, so it's functional, now my concern is, if there is a way to make it easier to read or even better and shorter my code, it's supposed to check if 3 'X' or 'O' are continuous in 3 cells in a row, column or diagonal, code for the string 'O' is the same as 'X' only changes classList.contains('targetO'); else is the same. it's a tictactoe game.

    //horizontal X wins
if (td[0].classList.contains ('targetX') && td[1].classList.contains ('targetX') && td[2].classList.contains ('targetX')){ alert('X player Won')}
if (td[3].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[5].classList.contains ('targetX')){ alert('X player Won')};
if (td[6].classList.contains ('targetX') && td[7].classList.contains ('targetX') && td[8].classList.contains ('targetX')){ alert('X player Won')};

//vertical X wins
if (td[0].classList.contains ('targetX') && td[3].classList.contains ('targetX') && td[6].classList.contains ('targetX')){ alert('X player Won')}
if (td[1].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[7].classList.contains ('targetX')){ alert('X player Won')};
if (td[2].classList.contains ('targetX') && td[5].classList.contains ('targetX') && td[8].classList.contains ('targetX')){ alert('X player Won')};

//diagonal X wins

if (td[0].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[8].classList.contains ('targetX')){ alert('X player Won')}
if (td[2].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[6].classList.contains ('targetX')){ alert('X player Won')};

I made a fiddle: https://jsfiddle.net/ycedmfn2/

Source Link
Stein
  • 21
  • 1

javascript code already working for a tictactoe game, trying to make it shorter

My code is already doing what I want, so it's functional, now my concern is, if there is a way to make it easier to read or even better and shorter my code, it's supposed to check if 3 'X' or 'O' are continuous in 3 cells in a row, column or diagonal, code for the string 'O' is the same as 'X' only changes classList.contains('targetO'); else is the same. it's a tictactoe game.

    //horizontal X wins
if (td[0].classList.contains ('targetX') && td[1].classList.contains ('targetX') && td[2].classList.contains ('targetX')){ alert('X player Won')}
if (td[3].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[5].classList.contains ('targetX')){ alert('X player Won')};
if (td[6].classList.contains ('targetX') && td[7].classList.contains ('targetX') && td[8].classList.contains ('targetX')){ alert('X player Won')};

//vertical X wins
if (td[0].classList.contains ('targetX') && td[3].classList.contains ('targetX') && td[6].classList.contains ('targetX')){ alert('X player Won')}
if (td[1].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[7].classList.contains ('targetX')){ alert('X player Won')};
if (td[2].classList.contains ('targetX') && td[5].classList.contains ('targetX') && td[8].classList.contains ('targetX')){ alert('X player Won')};

//diagonal X wins

if (td[0].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[8].classList.contains ('targetX')){ alert('X player Won')}
if (td[2].classList.contains ('targetX') && td[4].classList.contains ('targetX') && td[6].classList.contains ('targetX')){ alert('X player Won')};

I did a fiddle

want to see my fiddle https://jsfiddle.net/ycedmfn2/