Clickable html table cells

Question

I'm making a tic-tac-toe game. I've made my table cells clickable and once they are clicked they run a function called playPVPGame. To start, O and X are chosen randomly to go first. I have text in the corner of the page to indicate whose turn it is. Initially the text will be either "O goes first" or "X goes first". Afterwards it will change to "X is next" or "O is next" depending on the turn. The problem is after the initial text, the turn doesn't go back and forth like i want it to.

  var $ = function(id) { return document.getElementById(id); }; var newGameAction = function() { //clear table $("c1").innerHTML = ""; $("c2").innerHTML = ""; $("c3").innerHTML = ""; $("c4").innerHTML = ""; $("c5").innerHTML = ""; $("c6").innerHTML = ""; $("c7").innerHTML = ""; $("c8").innerHTML = ""; $("c9").innerHTML = ""; }; var pVpAction = function(elem) { var outputTect; var turnCounter = 0; var first_Turn = Math.floor(Math.random() * 2); $("firstTurn").innerHTML = first_Turn; first_turn = $("firstTurn").innerHTML; if(first_turn == 0) { message = "O goes first"; } if(first_turn == 1) { message = "X goes first"; } $("goNext").innerHTML = message; }; var playPVPGame = function(elem) { var turn = $("goNext").innerHTML; var message; if(turn == "O goes first") { elem.style.backgroundColor = "red"; elem.innerHTML = "O"; turn = "X is next"; $("goNext").innerHTML = turn; } if(turn == "X goes first") { elem.style.backgroundColor = "blue"; elem.innerHTML = "X"; turn = "O is next"; $("goNext").innerHTML = turn; } //does not work /*if($("goNext").innerHTML = "X is next") { $("newGame").disabled = true; }*/ message = $("goNext").innerHTML; if(message == "X is next") { elem.style.backgroundColor = "blue"; elem.innerHTML = "X"; message = "O is next"; $("goNext").innerHTML = message; } if(message == "O is next") { elem.style.backgroundColor = "red"; elem.innerHTML = "O"; message = "X is next"; $("goNext").innerHTML = message; } }; window.onload = function() { $("newGame").onclick = newGameAction; $("playerVplayer").onclick = pVpAction; }; 

 table {width:100%} table tr td{border:1px solid #000;height:50px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <span id="firstTurn">&nbsp;</span> <span id= "goNext"> &nbsp;</span> <table class = "board"> <tr> <td id = "c1" onclick="playPVPGame(this)" > . </td> <td id = "c2" onclick="playPVPGame(this)"> . </td> <td id = "c3" onclick="playPVPGame(this)"> . </td> </tr> <tr> <td id = "c4" onclick="playPVPGame(this)"> . </td> <td id = "c5" onclick="playPVPGame(this)"> . </td> <td id = "c6" onclick="playPVPGame(this)"> . </td> </tr> <tr> <td id = "c7" onclick="playPVPGame(this)"> . </td> <td id = "c8" onclick="playPVPGame(this)">. </td> <td id = "c9" onclick="playPVPGame(this)"> .</td> </tr> </table> <input type="button" id= "newGame" value="New Game"/> <input type="radio" id= "playerVplayer" value="Player vs Player"/> <input type="radio" id= "playerVcpu" value="Player vs CPU"/> 

Answer 1

Store the current player ('X' or 'O') in a variable instead of reading it from your GUI.

Reading from the GUI is bad practice and you having to ask this question shows why that's the case.

Answer 2

Here you have simplified minimal working example: https://jsfiddle.net/smajl/nr21zd9e/1/

I highly suggest you store the game state in some handy object like:

{
  nextTurn: 'X',
  isFirstTurn: true,
  ...
}

You are also ending </body> too soon in your HTML and have many other small or big issues in your code.