title: Interesting if/else if conditional chain problem
body: <p>I am having a hard time figuring out why this code is working the way it is.  Below, I have all of the code that produces my tic tac toe game.  The game works as intended until we come to a full board that SHOULD result in a win for either <code>'O'</code> or <code>'X'</code>.  My current logic sometimes will work as intended and pick the correct winner but a majority of the time, it will produce a <code>'DRAW</code>', even if the last move on the last square should result in a win.  Given the <code>if/else if</code> chain, I don't see how that would work?  The applicable <code>if/else if</code> statement is the second set.  </p>
  
  <p>Here is my code:</p>
  
  <pre><code>$(document).ready(function() {
      let addX = "&lt;h1&gt;X&lt;/h1&gt;"
      let addO = "&lt;h1&gt;O&lt;/h1&gt;"
      let turn = []
      let board = [$("#one"), $("#two"), $("#three"), $("#four"), $("#five"),$("#six"), $("#seven"), $("#eight"), $("#nine")]
      let combos = [[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [6,4,2]]
      for (let i = 0; i &lt; board.length; i++){
          board[i].click(function(){
              if (turn.length === 0){
                  turn.push(board.indexOf(board[i].html(addX)) + "X")
              } else if (turn.length % 2 !== 0 &amp;&amp; board[i].html() === ''){
                  turn.push(board.indexOf(board[i].html(addO)) + "O")
              } else if (turn.length % 2 === 0 &amp;&amp; board[i].html() === ''){
                  turn.push(board.indexOf(board[i].html(addX)) + "X")
              }
              for(let i = 0; i &lt; combos.length; i++){
                  if (turn.includes(combos[i][0] + 'O') &amp;&amp; turn.includes(combos[i][1] + 'O') &amp;&amp; turn.includes(combos[i][2] + 'O') ){
                      alert('O IS WINNER!')
                      setTimeout(function() {$("#ttt_table tbody tr td").html(""); }, 1500);
                      turn.length = 0
                  } else if(turn.includes(combos[i][0] + 'X') &amp;&amp; turn.includes(combos[i][1] + 'X') &amp;&amp; turn.includes(combos[i][2] + 'X') ){
                      alert('X IS WINNER!')
                      setTimeout(function() {$("#ttt_table tbody tr td").html(""); }, 1500);
                      turn.length = 0
                      break
                  } else if (turn.length === 9){
                      alert('DRAW!')
                      setTimeout(function() {$("#ttt_table tbody tr td").html(""); }, 1500);
                      turn.length = 0
                  }
              }
          })
      }
  });
  </code></pre>
  
  <p>Here is a codepen to test out the game itself:</p>
  
  <p><a href="https://codepen.io/tylerp33/pen/NeOxyY" rel="nofollow noreferrer">https://codepen.io/tylerp33/pen/NeOxyY</a></p>
  
  <p>Basically, shouldn't the game see there's a winning combo in: </p>
  
  <pre><code>else if(turn.join("").includes(combos[i][0] + 'X') &amp;&amp; turn.join("").includes(combos[i][1] + 'X') &amp;&amp; turn.join("").includes(combos[i][2] + 'X') 
  </code></pre>
  
  <p>before the last </p>
  
  <p><code>else if (turn.length === 9)</code> produces a 'DRAW'?</p>
  
  <p>Thanks for your help!</p>