0

I need help to swap Player after each turn. That is first click is player 1 (X) then second clicks becomes player 2(0).Right now each clicks puts an X.

const player1 = 'X'
const player2 = 'O'
CurrentPlayer = 1


if(CurrentPlayer == 1) {
    $("document").ready (function(){
    $(".grid-item").click (function(){
    $(this).html(player1);
    $("#player").html("2")
    CurrentPlayer = 2
   })
 });
}

if ( CurrentPlayer ==   2) {
    $("document").ready (function(){
    $(".grid-item").click (function(){
    $(this).html(player2);
    $("#player").html("3")

    })
  });
 }

enter image description here

Taazar
  • 1,545
  • 18
  • 27

2 Answers2

2

There are so many mistake in your code. For a start,

$("document").ready (function(){

});

should be for the file not for each click, another issue is the event

$(".grid-item").click (function(){
  //
});

should be init only once, inside that event only we need to check for the player status.

You code should look something like this

$("document").ready (function(){

    const player1 = 'X'
    const player2 = 'O'
    var CurrentPlayer = 1


    $(".grid-item").click (function(){
        if(CurrentPlayer == 1) {
            //do your stuff for player 1
            CurrentPlayer = 2
        }
        else if(CurrentPlayer == 2) {
            //do your stuff for player2
            CurrentPlayer = 1
        }
    });

});
Rehan
  • 3,813
  • 7
  • 37
  • 58
  • thank you ill try that .. sry i just started coding 3 weeks ago – Irfan Golaup Dec 27 '18 at 11:48
  • No issue, if you find my solution working please accept the answer. – Rehan Dec 27 '18 at 11:53
  • Could you now give me some help about how to continue the game .. how to check the winning status etc .. please – Irfan Golaup Dec 27 '18 at 11:56
  • Just start a new question asking your doubts we will help you out. – Rehan Dec 27 '18 at 12:00
  • how to i check if grid1 grid2 and grid3 have the same value in javascript – Irfan Golaup Dec 27 '18 at 12:23
  • You need to have a variable which keeps track of it all the data of a particular grid like 1.who marked this grid 2.what is the mark positing of the grid etc. For storing these kind of values we need to use Array Of Objects `[{...},{...}]` check out this https://www.w3schools.com/js/js_object_definition.asp and https://www.w3schools.com/js/js_arrays.asp – Rehan Dec 27 '18 at 12:48
  • I still can't figure it out :( – Irfan Golaup Dec 27 '18 at 13:32
  • Open up a new question and we will try to figure it out. – Rehan Dec 27 '18 at 16:11
0

You were attaching ready function twice, depending on the current value of CurrentPlayer which you have intialized with 1, so your method for player-2 never gets attached.

You can try the following

const player1 = 'X';
const player2 = 'O';
let CurrentPlayer = 1;

$("document").ready(function () {
  $(".grid-item").click(function () {
    if (CurrentPlayer === 1) {
      // put X for palyer-1
      $(this).html(player1);
      $("#player").html("2");
      // finally toggle CurrentPlayer
      CurrentPlayer = 2;
    } else {
      // put O for palyer-2
      $(this).html(player2);
      $("#player").html("3");

      // finally toggle CurrentPlayer
      CurrentPlayer = 1;
    }
  })
});
Avi
  • 2,014
  • 1
  • 9
  • 21
  • Hi, could you tell me how do i check the win conditions now. I have no clue how to start – Irfan Golaup Dec 27 '18 at 12:34
  • @IrfanGolaup you need to check for same values in linear and diagonal fields/columns. You can check [this](https://stackoverflow.com/questions/1056316/algorithm-for-determining-tic-tac-toe-game-over) for further clarification and contains a good explanation with code – Avi Dec 27 '18 at 14:06
  • i cant understand how to implement it in my code http://prntscr.com/m06ew1 – Irfan Golaup Dec 27 '18 at 14:11