javascript - How do I create turns in a Tic Tac Toe game?

Question

Sorry if this is really obvious. I am pretty new to JavaScript. I have had to create a basic X game . Here is the HTML code.

<table border="1" cellpadding="5">
    <tbody>
        <tr>
            <td id="cell1"></td>
            <td id="cell2"></td>
            <td id="cell3"></td>
        </tr>
        <tr>
            <td id="cell4"></td>
            <td id="cell5"></td>
            <td id="cell6"></td>
        </tr>
        <tr>
            <td id="cell7"></td>
            <td id="cell8"></td>
            <td id="cell9"></td>
        </tr>
    </tbody>
</table>

I had to write a code so that clicking on any cell, would make an X appear on the cell.

function click() {
    if (this.id == "cell1") {
        document.getElementById("cell1").innerHTML = "X";
    } else if (this.id == "cell2") {
        document.getElementById("cell2").innerHTML = "X";
    } else if (this.id == "cell3") {
        document.getElementById("cell3").innerHTML = "X";

    } else if (this.id == "cell4") {
        document.getElementById("cell4").innerHTML = "X";
    } else if (this.id == "cell5") {
        document.getElementById("cell5").innerHTML = "X";
    } else if (this.id == "cell6") {
        document.getElementById("cell6").innerHTML = "X";

    } else if (this.id == "cell7") {
        document.getElementById("cell7").innerHTML = "X";
    } else if (this.id == "cell8") {
        document.getElementById("cell8").innerHTML = "X";
    } else if (this.id == "cell9") {
        document.getElementById("cell9").innerHTML = "X";

    }
}

document.getElementById("cell1").onclick = click;
document.getElementById("cell2").onclick = click;
document.getElementById("cell3").onclick = click;
document.getElementById("cell4").onclick = click;
document.getElementById("cell5").onclick = click;
document.getElementById("cell6").onclick = click;
document.getElementById("cell7").onclick = click;
document.getElementById("cell8").onclick = click;
document.getElementById("cell9").onclick = click;

This method successfully creates an X into each and every cell on the table when clicked. The next task is something I don't understand as I have to now incorporate 'O's into the table, like a Tic Tac Toe Game..which is fine but there should be turns like once there is an X the next one should be an O and then an X and so on. Can anyone tell me please what would be appropriate to do and which method/function can be used in such an instance? Ta!

Answer 1

you need a variable for it

 var nextTurn = 'X' 

at the top

then something like:

 if (this.id == "cell1")
 {
      if(document.getElementById("cell1").innerHTML == ""){ 
           document.getElementById("cell1").innerHTML = nextTurn;
           changeTurn();
      }
 }  

etc

 function changeTurn(){
      if(nextTurn == 'X'){
           nextTurn = 'O';
      } else {
           nextTurn = 'X';
      }
 }