Why My function doesn't work properly as a I want?

Question

Here, I want when I will click on X turn , all gameDiv boxes will be X . And when I will click on 0 turns it will be all 0 . but in my code When I click on x turn or 0 turns , every time it is giving me 0 . I know this problem is happening because, in divcall function , select0 function is working every time. But I want to know how can I fix this problem? I want, whenever I will click on X or 0 only selectX or select0 function will work```. As I am learning javascript recently, So, I couldn't be able to find out the solution for this problem. Please help me to fix this problem. I am just stuck here.

 let num1='X'; let num2='0'; function divCall(divIndex){ let childDiv=document.getElementById("div"+divIndex); selectX(childDiv); select0(childDiv); } //start & restart function let startButton=document.querySelector(".buttonDiv"); let childStart=startButton.children; childStart[0].addEventListener("click",start); childStart[1].addEventListener("click",restart); function start(){ let closeElement=document.querySelector(".startAlert"); closeElement.style.visibility="visible"; closeElement.style.opacity="1"; } function restart(){ let restartDiv=document.querySelector(".container"); let childRestartDiv=restartDiv.children; for(let i=0;i<9;i++){ childRestartDiv[i].innerHTML=" "; } } //popup funtion let parentOfPopupDiv=document.querySelector(".startAlert"); let childOfPopupDiv=parentOfPopupDiv.children; childOfPopupDiv[0].addEventListener("click",close); childOfPopupDiv[2].addEventListener("click",selectX); childOfPopupDiv[3].addEventListener("click",select0); //close function function close(){ let closeElement=document.querySelector(".startAlert"); closeElement.style.visibility="hidden"; closeElement.style.opacity="0"; } //select x funtion function selectX(childDiv){ close(); childDiv.innerHTML=num1; } // select 0 function function select0(childDiv){ close(); childDiv.innerHTML=num2; }

 *{ margin: 0; padding: 0; box-sizing: border-box; } body{ text-align: center; } h1{ margin-top: 50px; } .container{ margin: auto; margin-top: 100px; margin-bottom: 50px; width: 300px; display: flex; flex-wrap: wrap; } .container .gameDiv{ height: 100px; width: 100px; border: 2px solid black; line-height: 100px; font-size: 50px; font-weight: 700; } .container .gameDiv:nth-child(1), .container .gameDiv:nth-child(2), .container .gameDiv:nth-child(3){ border-top: none; } .container .gameDiv:nth-child(1), .container .gameDiv:nth-child(4), .container .gameDiv:nth-child(7){ border-left: none; } .container .gameDiv:nth-child(7), .container .gameDiv:nth-child(8), .container .gameDiv:nth-child(9){ border-bottom: none; } .container .gameDiv:nth-child(3), .container .gameDiv:nth-child(6), .container .gameDiv:nth-child(9){ border-right: none; } .buttonDiv{} .buttonDiv button{ width: 130px; height: 45px; margin-right: 10px; cursor: pointer; } .buttonDiv button:nth-child(2){ margin-right: 0; } .startAlert{ height: 300px; width: 500px; background: black; color:white; padding: 20px; position: fixed; top: 25%; left: 0; right: 0; margin: auto; visibility: hidden; opacity: 0; } .startAlert p{ text-align: right; cursor: pointer; } .startAlert h1{ margin: 50px 0; } .startAlert button{ height: 50px; width: 50px; line-height: 50px; font-weight: 600; background: #e1b9cb; }

 <h1>Tic-Tac-Toe</h1> <div class="container"> <div id="div1" class="gameDiv" onclick="divCall(1)"></div> <div id="div2" class="gameDiv" onclick="divCall(2)"></div> <div id="div3" class="gameDiv" onclick="divCall(3)"></div> <div id="div4" class="gameDiv" onclick="divCall(4)"></div> <div id="div5" class="gameDiv" onclick="divCall(5)"></div> <div id="div6" class="gameDiv" onclick="divCall(6)"></div> <div id="div7" class="gameDiv" onclick="divCall(7)"></div> <div id="div8" class="gameDiv" onclick="divCall(8)"></div> <div id="div9" class="gameDiv" onclick="divCall(9)"></div> </div> <div class="buttonDiv"> <button>Start</button> <button>Restart</button> </div> <div class="startAlert"> <p>X</p> <h1>Select Your Turn</h1> <button>X Turn</button> <button>0 Turn</button> </div>

Thanks in Advance

Answer 1

As per your question you need to handle the current player - X or O . It means you need to hold the current state.

1. You need an initial state for current player.

let player_x = "X";
let player_o = "0";
let toggle = false; // <--- Flag to toggle current player.
let current = toggle ? player_x : player_o; // <--- Current player.

2. On selection of turn you need to update the current player state.

function setCurrent(toggle) {
  current = toggle ? player_x : player_o;
}

You will call the above method on selection of the turn that is selectX and select0 . Notice that for X the toggle parameter should be false .

3. On click of the div inside tic-tac-toe you add the current state in the innerHTML and toggle the current state.

function divCall(id) {
  let childDiv = document.getElementById(id);

  childDiv.innerHTML = current;
  toggle = !toggle;
  setCurrent(toggle);
}

This way you will not override the values and will have clear state for the current player.

Working example: https://codesandbox.io/s/sample-tic-tac-toe-9vubg

This is of course a quick and one way of solving this problem. You can always work on refactoring the code to work better.