function trouble, the function works but doesnt shut up when its needed-CodePudding

So the function isWinAndFin() declares when there is either a draw or a player won the game of tic tac toe but it only calls draws now and doesn't stop when it does, here's the whole code. All i ask is help to stop the game when the either two conditions are met and have it announced correctly. also it would help if some pointers as to how were given within the hour.


let board=["","","","","","","","",""];
const boardIndex =['b1','b2','b3','b4','b5','b6','b7','b8','b9']
const arr1=document.querySelectorAll(".button");
let playerTurn= document.getElementById('turn');

let currentPlayer= "X";
let gameOn=false;




console.log(arr1);
console.log(playerTurn);


const winningCondition = [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6],
];
gameIsOn();
function buttonClick(id){
   const clicked = this.document.getElementById(id)
    console.log(id)
   if (clicked.textContent != "" || !gameOn){
      return;
   }
   else{
      clicked.textContent = currentPlayer
       if (currentPlayer == "X") {
            currentPlayer = "O"
       }
       else {currentPlayer = "X"}
       playerturn=document.getElementById("turn").textContent = currentPlayer   "'s turn"
      //updateSpace(this,arr1);
      isWinAndFin();
   }
}
/*function checkPlayer{
   for( var g = 0; g< arr1.length; g  ;){

   }
}*/
function greet(){
   console.log(winningCondition);


}
greet();
/*function isWin() {
   return winningCondition.some(
   (condition) => {
   let line = condition.map((idx)=>document.getElementById(boardIndex[idx]).textContent);
   return (line[0] != "" && line.every((x)=>x==line[0]))
   }
   )
   }*/
   /*let gameWon=false;
   if (!gameWon){
      isWinAndFin(false);
   }*/
function isWinAndFin(){
   let gameOn=false;
   
   

   for (var i=0;i<=winningCondition.length; i  ){
      const winCheck =winningCondition[i];
      
      let winTrue=true;
      console.log(winningCondition[0]);
      
     const  winAnno=playerTurn.innerHTML = currentPlayer   "'s Wins!";
      



   if(winningCondition[0]==winTrue){
      console.log("win");
      wintrue=gameWon;
      gameOn=false;


      return winAnno;
      
   }
   else if(winningCondition[1]==winTrue){
      console.log("win");

      return winAnno;
      
   }
else if(winningCondition[2]==winTrue){
   console.log("win");

   return winAnno;
      
   }
   else if(winningCondition[3]==winTrue){
      console.log("win");

      return winAnno;
      
   }
   else if(winningCondition[4]==winTrue){
      console.log("win");

      return winAnno;
      
   }
   else if(winningCondition[5]==winTrue){
      console.log("win");

      return winAnno;
      
   }
   else if(winningCondition[6]==winTrue){
      console.log("win");

      return winAnno;
      
   }
   else if(winningCondition[7]==winTrue){
      console.log("win");
      return winAnno;
      
   }
   
      
   
      else{
         
         wintrue=false
      //while( let g = 0; g< board.length; g  ;){
      console.log("draw")
      return playerTurn.innerHTML = "draw";}

   


   
}
}




function gameIsOn(){
   playerTurn.textContent= currentPlayer  " 's turn";
   //board.forEach(function (_arr1) {
   //      return board.addEventListener("click", updateSpace);
   //   });
   gameOn=true;



}

I tried making a for loop for the last else statement but it caused too many errors and the remmants of what i tried are left in the code as comments.

CodePudding user response：

in HTML change

    <div >
        <button onclick="buttonClick('0')" id="b0"></button>
        <button onclick="buttonClick('1')" id="b1"></button>
        <button onclick="buttonClick('2')" id="b2"></button>
        <button onclick="buttonClick('3')" id="b3"></button>
        <button onclick="buttonClick('4')" id="b4"></button>
        <button onclick="buttonClick('5')" id="b5"></button>
        <button onclick="buttonClick('6')" id="b6"></button>
        <button onclick="buttonClick('7')" id="b7"></button>
        <button onclick="buttonClick('8')" id="b8"></button>
    </div>

js file


let board=["","","","","","","","",""];
const boardIndex =['b1','b2','b3','b4','b5','b6','b7','b8','b9']
const arr1=document.querySelectorAll(".button");
let playerTurn= document.getElementById('turn');

let currentPlayer= "X";
let gameOn=false;




console.log(arr1);
console.log(playerTurn);


const winningCondition = [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6],
];
gameIsOn();
function buttonClick(id) {
   const clicked = this.document.getElementById("b" id)
   
   console.log(id)
   if (clicked.textContent != "" || !gameOn) {
       return;
   }
   else {
      board[id] = currentPlayer
       clicked.textContent = currentPlayer
       isWinAndFin();
       if (currentPlayer == "X") {
           currentPlayer = "O"
       }
       else { currentPlayer = "X" }
       if(gameOn){
       playerturn = document.getElementById("turn").textContent = currentPlayer   "'s turn"
       }
       //updateSpace(this,arr1);
   }
}
/*function checkDraw(){
   for( let bean = 0; bean<= arr1.length; bean  ){
      if(bean=9){
         console.log("draw");


         return playerTurn.innerHTML = "draw";
      } 
      
      return ;
}
}*/
function greet(){
   console.log(winningCondition);


}
greet();
/*function isWin() {
   return winningCondition.some(
   (condition) => {
   let line = condition.map((idx)=>document.getElementById(boardIndex[idx]).textContent);
   return (line[0] != "" && line.every((x)=>x==line[0]))
   }
   )
   }*/
   /*let gameWon=false;
   if (!gameWon){
      isWinAndFin(false);
   }*/
   function isWinAndFin(){
      let gameWon = false;
      let draw = false;
      winningCondition.map(condition=>{
         console.log(board,condition)
          if (board[condition[0]] == board[condition[1]] && board[condition[1]] == board[condition[2]] && board[condition[0]] != ""){
              gameWon = true;
              gameOn = false;
              console.log("win");
              document.getElementById("turn").innerHTML = currentPlayer   "'s Wins!"
          }else if (board.every((x)=>x!="")){
              draw = true;
              gameOn = false;
              console.log("draw");
              document.getElementById("turn").innerHTML = "draw"

          }
      })
      return [gameWon,draw];
  }



function gameIsOn(){
   playerTurn.textContent= currentPlayer  " 's turn";
   //board.forEach(function (_arr1) {
   //      return board.addEventListener("click", updateSpace);
   //   });
   gameOn=true;
   //checkDraw();



}