title: Can't make 2 Player Tic Tac Toe game work JavaScript
body: <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt; &lt;-- div container --&gt;
  
  &lt;div id="div1" onclick="canvasClicked(1);"&gt;&lt;/div&gt;
  &lt;div id="div2" onclick="canvasClicked(2);"&gt;&lt;/div&gt;
  &lt;div id="div3" onclick="canvasClicked(3);"&gt;&lt;/div&gt;
  &lt;div id="div4" onclick="canvasClicked(4);"&gt;&lt;/div&gt;
  &lt;div id="div5" onclick="canvasClicked(5);"&gt;&lt;/div&gt;
  &lt;div id="div6" onclick="canvasClicked(6);"&gt;&lt;/div&gt;
  &lt;div id="div7" onclick="canvasClicked(7);"&gt;&lt;/div&gt;
  &lt;div id="div8" onclick="canvasClicked(8);"&gt;&lt;/div&gt;
  &lt;div id="div9" onclick="canvasClicked(9);"&gt;&lt;/div&gt;
  
  
  &lt;/div&gt; &lt;-- div container end --&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>  .container{     /*some css*/
  border: 2px solid red;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  margin-top: 10%;
  }
  
  .container div{
  float: left;
  height: 132px;
  width: 131.3px;
  border: 1px solid black;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>var painted; //global variables
  var content;
  var winningCombinations;
  var theCanvas; 
  var c;
  var cxt;
  var w;
  var y;
  
  var turn = 0;
  var squaresFilled = 0; //global variables end
  
  window.onload = function(){               //instantiating variables
  painted = new Array();   //to check if the canvas contains something already
  content = new Array();  //to see what the canvas contains 'X' or 'O'
  
  winningCombinations = [[1,2,3],[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],
  [1,5,9],[3,5,7]]; //all possible combinations :P
  
  for(var i=0; i&lt;=8; i++){
      painted[i] = false;
      content[i]=false;
  }
  }
  
  
  function canvasClicked(number){
  
  theCanvas = "div" + number; //takes the div Id from html
  c = document.getElementById(theCanvas);
  
  if(painted[number-1]==false){
      if(turn%2==0){               //use X here
          c.innerHTML = '&lt;img src="cross image" alt="x" width=100% 
  height=100%&gt;';
          content[number-1] = 'X'; //storing value in content array
      }else{                       // user O here
          c.innerHTML = '&lt;img src=" O image" height="100%" 
  width="100%" alt="O"&gt;';
          content[number-1] = 'O'; //storing value in content array
      }
  }
  else{
      alert('This block is already occupied, try another block');
      turn--;
      squaresFilled--;
  }
  turn++;
  painted[number-1]= true;
  squaresFilled++;
  checkForWinner(content[number-1]);
  
  if(squaresFilled == 9){
      alert('It is a TIE');
      playAgain();
  }
  }
  
  function checkForWinner(symbol){  // This functions seems to be the problem
  
  for(var a = 0; a &lt; winningCombinations.length; a++){
  
      if(content[winningCombinations[a][0]]==symbol &amp;&amp; 
  content[winningCombinations[a][1]]==symbol &amp;&amp; content[winningCombinations[a]
  [2]]==symbol){
          console.log(symbol + ' won!!');
      }
  
  
  }
  }
  function playAgain(){ // just another function to reset the game
      y=confirm("PLAY AGAIN?");
      if(y==true){
          location.reload(true);
      }else{
          alert('Good Bye Then!!');
      }
  }
  </code></pre>
  
  <p>It runs normally but the results are not expected. It sometimes randomly make anyone winner(i guess), i can't seem to find the bug, i used debugger as well but i just can't find the problem...any help would be appreciated.
  Thanks</p>