title: Javascript: How to check the winning state of all boxes/cells in a Tic Tac Toe game?
body: <p>Ive attempted to make Tic Tac Toe as a javascript learning project and Im currently testing the first row winning state for Player 1, but for some reason every time the 3rd box is clicked regardless if the 1st and 2nd box has been clicked, it displays the winning message. Obviously thats not how tic tac toe works, as you need 3 in a row not 1 or 2.</p>
  <p>Im using 2 arrays to test the winning state. 1 array for the boxes that have been already been clicked by the player, and 1 array that contains the winning combination for the first row. My goal was to test using an if statement to see if the boxes already clicked by the player matches the ones in the array with the winning combo.</p>
  <p>I have tried using the .every method</p>
  <blockquote>
  <pre><code>for(let i=0;i&lt;fRowBoxes.length;i++){
  let fRowWin= () =&gt; X_Checked.includes((fRowBoxes[0],fRowBoxes[1],fRowBoxes[2])) ;
  if(fRowBoxes.every(fRowWin) === true){
  msg.innerHTML =`&lt;h1&gt; ${player1} Wins! &lt;/h1&gt;`;
  }
  </code></pre>
  </blockquote>
  <p>.textContent</p>
  <blockquote>
  <pre><code>if((fRowBoxes[0] &amp;&amp; fRowBoxes[1] &amp;&amp; fRowBoxes[2]).textContent == &quot; x &quot;){
   msg.innerHTML =`&lt;h1&gt; ${player1} Wins! &lt;/h1&gt;`;
   }
  </code></pre>
  </blockquote>
  <p>and the .includes method</p>
  <blockquote>
  <pre><code>function checkScore(){
              if (X_Checked.includes(fRowBoxes[0] &amp;&amp; fRowBoxes[1] &amp;&amp; fRowBoxes[2])){/*Only checks for fRowBoxes[2]?*/
                  msg.innerHTML =`&lt;h1&gt; ${player1} Wins! &lt;/h1&gt;`;
             }
            }
  </code></pre>
  </blockquote>
  <p>Still nothing seems to work or it leads to the same result, any advice or suggestions would be highly appreciated.</p>
  <pre><code>    let player1 = `&lt;div class=&quot;symbol x&quot;&gt; x &lt;/div&gt;`;
      let player2 = `&lt;div class=&quot;symbol o&quot;&gt; o &lt;/div&gt;`;
      let turn = player1;
      
      
      let gridBoxes = document.querySelector('.grid').children;
      
      let boxes = [];/*Stores all boxes in 3x3 grid*/
  
      for(let i = 0; i &lt; gridBoxes.length; i++){
        boxes.push(gridBoxes[i]);
      }
      
      const msg = document.querySelector('div.msg ');
      
      
      let fRowBoxes = [boxes[0],boxes[1],boxes[2]];/*Array with first row boxes*/
      let sRowBoxes = [boxes[3],boxes[4],boxes[5]];
      let tRowBoxes = [boxes[6],boxes[7],boxes[8]];
      
      let fColBoxes = [boxes[0],boxes[3],boxes[6]];
      let sColBoxes = [boxes[1],boxes[4],boxes[7]];
      let tColBoxes = [boxes[2],boxes[5],boxes[8]];
      
      let dBoxes1 =[boxes[0],boxes[4],boxes[8]];
      let dBoxes2 = [boxes[2],boxes[4],boxes[6]];
      
      
      let X_Checked = [];/*Stores boxes clicked by player 1*/
      let O_Checked = [];
      
      msg.display ='block';
  </code></pre>
  <blockquote>
  <pre><code>function checkScore(){
          if (X_Checked.includes(fRowBoxes[0] &amp;&amp; fRowBoxes[1] &amp;&amp; fRowBoxes[2])){/*Only checks for fRowBoxes[2]?*/
              msg.innerHTML =`&lt;h1&gt; ${player1} Wins! &lt;/h1&gt;`;
         }
       }
  </code></pre>
  </blockquote>
  <pre><code>    const tictactoe = (function(){/*START*/
      
        msg.innerHTML = `&lt;h1&gt;Player 1 (X)&lt;/h1&gt;`;
      
          for(let i = 0; i&lt;boxes.length; i++){
            
          boxes[i].addEventListener('click',() =&gt;{
      
            if(boxes[i].value){
              boxes[i].click(false);
            }
            
            else if(boxes[i].textContent === &quot;&quot;){
                boxes[i].innerHTML = turn;
                checkPlayer();
  
       /**------------------------------------------- */
      
            if (turn === player1){
              O_Checked.push(boxes[i]);
              console.log(O_Checked);
              checkScore();/*Checks for a winner*/
          }
              else if (turn === player2){
                  X_Checked.push(boxes[i]);
                  console.log( X_Checked);
                   checkScore();
                
                }
        }     
      });}
      }());/*END*/
      
      
      let checkPlayer = (function(){
      
        if(turn === player1){
            turn = player2;
        msg.innerHTML = `&lt;h1&gt;Player 2 (O)&lt;/h1&gt;`;
        } 
      
        else if(turn === player2){
            turn = player1;
            msg.innerHTML = `&lt;h1&gt;Player 1 (X)&lt;/h1&gt;`;
        }
      
      });
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let player1 = `&lt;div class="symbol x"&gt; x &lt;/div&gt;`;
  let player2 = `&lt;div class="symbol o"&gt; o &lt;/div&gt;`;
  let turn = player1;
  
  
  let gridBoxes = document.querySelector('.grid').children;
  
  let boxes = [];
  for(let i = 0; i &lt; gridBoxes.length; i++){
    boxes.push(gridBoxes[i]);
  }
  
  const msg = document.querySelector('div.msg ');
  
  
  let fRowBoxes = [boxes[0],boxes[1],boxes[2]];
  let sRowBoxes = [boxes[3],boxes[4],boxes[5]];
  let tRowBoxes = [boxes[6],boxes[7],boxes[8]];
  
  let fColBoxes = [boxes[0],boxes[3],boxes[6]];
  let sColBoxes = [boxes[1],boxes[4],boxes[7]];
  let tColBoxes = [boxes[2],boxes[5],boxes[8]];
  
  let dBoxes1 =[boxes[0],boxes[4],boxes[8]];
  let dBoxes2 = [boxes[2],boxes[4],boxes[6]];
  
  let X_Checked = [];
  let O_Checked = [];
  
  msg.display ='block';
  
  function checkScore(){
  if (X_Checked.includes(fRowBoxes[0] &amp;&amp; fRowBoxes[1] &amp;&amp; fRowBoxes[2])){
      msg.innerHTML =`&lt;h1&gt; ${player1} Wins! &lt;/h1&gt;`;
  }
  
  
  }
    const tictactoe = (function(){/*START*/
  
    msg.innerHTML = `&lt;h1&gt;Player 1 (X)&lt;/h1&gt;`;
  
      for(let i = 0; i&lt;boxes.length; i++){
        
      boxes[i].addEventListener('click',() =&gt;{
  
        if(boxes[i].value){
          boxes[i].click(false);
        }
        
        else if(boxes[i].textContent === ""){
            boxes[i].innerHTML = turn;
            checkPlayer();
   /**------------------------------------------- */
  
        if (turn === player1){
          O_Checked.push(boxes[i]);
          console.log(O_Checked);
          checkScore();
      }
          else if (turn === player2){
              X_Checked.push(boxes[i]);
              console.log( X_Checked);
               checkScore();
            
            }
    }     
  });}
  }());/*END*/
  
  
  let checkPlayer = (function(){
  
    if(turn === player1){
        turn = player2;
    msg.innerHTML = `&lt;h1&gt;Player 2 (O)&lt;/h1&gt;`;
    } 
  
    else if(turn === player2){
        turn = player1;
        msg.innerHTML = `&lt;h1&gt;Player 1 (X)&lt;/h1&gt;`;
    }
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{box-sizing:border-box;}
  
  body{
      margin:0;
      padding:0;
      font-family:arial;
  }
  .container{
      display:flex;
      height:100vh;
      width:100%;
      position:relative;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: tomato;
      /* background-image:linear-gradient(to right, tomato, black, rgb(225, 225, 225)); */
  }
  .box:hover{
  background-color:rgb(230,230,230);
  transition: .4s ease-in-out;
  }
  
  .box,.grid{
  
      cursor:pointer;
  }
  
  .box{
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items:center;
  background-color:black;
  
  }
  
  .symbol{
  font-size:4em;
  font-style:bold;
  font-family:arial;
  text-transform:uppercase;
  text-shadow:0px 0px 5px rgb(100,100,100);
  }
  
  .x{
  color:tomato;
  }
  .o{
   color:white;
  }
  
  
  .grid{
      display: grid;
      width: 350px;
      grid-gap:10px;
      border-radius:10px;
     border:solid 10px white;
      background-color:white;
      grid-template-rows: repeat(3,100px);
      grid-template-columns: repeat(3,1fr);
      box-shadow: 0px 1px 8px rgb(50, 50, 50);
  }
  
  /* .grid:nth-child(even) */
  
  
  .msg{
      color:white;
      position:absolute;
      text-shadow: 0px 1px 3px rgb(50, 50, 50);
      top:15px;
      font-size:2em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta http-equiv ="author" content="Carl Dawkins"&gt;
      &lt;meta name ="description" content="A Tic Tac Toe Game"&gt;
      &lt;link type="text/css" href="../css/style.css" rel="stylesheet"&gt;
      &lt;title&gt;TicTacToe&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;div class="msg"&gt; &lt;/div&gt;
      &lt;div class="grid"&gt;
          &lt;div id="box-1" class="box" &gt;&lt;/div&gt;
          &lt;div id="box-2" class="box" &gt;&lt;/div&gt;
          &lt;div id="box-3" class="box" &gt;&lt;/div&gt;
          &lt;div id="box-4" class="box" &gt;&lt;/div&gt;
          &lt;div id="box-5" class="box" &gt;&lt;/div&gt;
          &lt;div id="box-6" class="box" &gt;&lt;/div&gt;
          &lt;div id="box-7" class="box" &gt;&lt;/div&gt;
          &lt;div id="box-8" class="box" &gt;&lt;/div&gt;
          &lt;div id="box-9" class="box" &gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="../js/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>