title: Tic Tac Toe in Javascript
body: <p>The code works fine but the compMove() function isn't working as I intended. I want it to do the following:
  1. If the user(X) has a winning move then block it.
  2. If the computer has a winning move(O) then take it.</p>
  
  <p>This is the link to the program:</p>
  
  <p><a href="http://jsfiddle.net/vokqj28v/1/" rel="nofollow">This is the hyperlink to the jsfiddle implementation of my code</a></p>
  
  <p>Given below is the javascript part of the game.</p>
  
  <pre><code>$(document).ready(function () {
    var count = 0;
  
    function isAvailableField($this) {
      return !$this.attr('data-move');
    }
  
    function userMove($this, move) {
      $this.attr('data-move', move);
      $this.addClass(move);
    }
  
    function reset() {
      $('.move-x').removeClass('move-x');
      $('.move-o').removeClass('move-o');
      $('.grid td').attr('data-move', '');
      count = 0;
    }
  
    $('.grid td').click(function () {
      if (isAvailableField($(this))) {
        userMove($(this), 'move-x');
        count++;
        checkWin();
        compMove();
      }
    });
  
    function compMove(){
      if(isAvailableField('#field' + 1)&amp;&amp;($('#field'+2).attr('data-move') == $('#field' + 3).attr('data-move') || $('#field' + 5).attr('data-move') == $('#field' + 9).attr('data-move') || $('#field' + 4).attr('data-move')==$('#field' + 7).attr('data-move'))) {
        userMove('#field'+1,'move-o');
        count++;
        checkWin();
      }
  
      else if(isAvailableField('#field'+2)&amp;&amp;($('#field'+1).attr('data-move')==$('#field'+3).attr('data-move')||$('#field'+5).attr('data-move')==$('#field'+8).attr('data-move'))){
        userMove('#field'+2,'move-o');
        count++;
        checkWin();
      }
  
      else if(isAvailableField('#field'+3)&amp;&amp;($('#field'+2).attr('data-move')==$('#field'+1).attr('data-move')||$('#field'+5).attr('data-move')==$('#field'+7).attr('data-move')||$('#field'+6).attr('data-move')==$('#field'+9).attr('data-move'))){
        userMove('#field'+3,'move-o');
        count++;
        checkWin();
      }
  
      else if(isAvailableField('#field'+4)&amp;&amp;($('#field'+1).attr('data-move')==$('#field'+7).attr('data-move')||$('#field'+5).attr('data-move')==$('#field'+6).attr('data-move'))){
        userMove('#field'+4,'move-o');
        count++;
        checkWin();
      }
  
      else if(isAvailableField('#field'+5)&amp;&amp;($('#field'+2).attr('data-move')==$('#field'+8).attr('data-move')||$('#field'+1).attr('data-move')==$('#field'+9).attr('data-move')||$('#field'+3).attr('data-move')==$('#field'+7).attr('data-move')||$('#field'+4).attr('data-move')==$('#field'+6).attr('data-move'))){
        userMove('#field'+5,'move-o');
        count++;
        checkWin();
      }
  
      else if(isAvailableField('#field'+6)&amp;&amp;($('#field'+4).attr('data-move')==$('#field'+5).attr('data-move')||$('#field'+3).attr('data-move')==$('#field'+9).attr('data-move'))){
        userMove('#field'+6,'move-o');
        count++;
        checkWin();
      }
  
      else if(isAvailableField('#field'+7)&amp;&amp;($('#field'+1).attr('data-move')==$('#field'+4).attr('data-move')||$('#field'+5).attr('data-move')==$('#field'+3).attr('data-move')||$('#field'+8).attr('data-move')==$('#field'+9).attr('data-move'))){
        userMove('#field'+7,'move-o');
        count++;
        checkWin();
      }
  
      else if(isAvailableField('#field'+8)&amp;&amp;($('#field'+2).attr('data-move')==$('#field'+5).attr('data-move')||$('#field'+7).attr('data-move')==$('#field'+9).attr('data-move'))){
        userMove('#field'+8,'move-o');
        count++;
        checkWin();
      }
  
      else if(isAvailableField('#field'+9)&amp;&amp;($('#field'+1).attr('data-move')==$('#field'+5).attr('data-move')||$('#field'+3).attr('data-move')==$('#field'+6).attr('data-move')||$('#field'+7).attr('data-move')==$('#field'+8).attr('data-move'))){
        userMove('#field'+9,'move-o');
        count++;
        checkWin();
      }
  
      else{
        if(isAvailableField('#field'+5)){
          userMove('#field'+5,'data-move');
          count++;
          checkWin();
        }
        else if(isAvailableField('#field'+1)){
          userMove('#field'+1,'data-move');
          count++;
          checkWin();
        }
        else if(isAvailableField('#field'+9)){
          userMove('#field'+9,'data-move');
          count++;
          checkWin();
        }
        else if(isAvailableField('#field'+8)){
          userMove('#field'+8,'data-move');
          count++;
          checkWin();
        }
        else{
          userMove('#field'+4,'data-move');
          count++;
          checkWin();
        }
      }
  
    }
  
    var winconditions = [
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, 9],
      [1, 4, 7],
      [2, 5, 8],
      [3, 5, 7],
      [1, 5, 9],
      [3, 6, 9]
    ];
  
    function judgmentDay(move) {
      for (var i = 0; i &lt; winconditions.length; i++) {
        var line = winconditions[i];
        var j = 0;
        for (; j &lt; line.length; j++) {
          var num = line[j];
          if ($('#field' + num).attr('data-move') != move) {
            break;
          }
        }
        if (j == line.length) {
          return true;
        }
      }
    }
  
    function checkWin() {
      if (count &lt; 5) {
        return;
      }
      if (judgmentDay('move-x')) {
        alert("X wins!");
        reset();
      } else if (judgmentDay('move-o')) {
        alert("O wins!");
        reset();
      } else if (count == 9) {
        alert("It's a draw!");
        reset();
      }
  
    }
  });
  </code></pre>