Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

Please help, I am stuck!!!!!!!!!!!!!!!!!!!

http://codepen.io/tushar_13/pen/zqPQOp

Nothing is working, I can't get the icons when I click on the game-board, nothing at all. I have a "game" function at the end of the js file which will run when a user clicks on the game-board and has all the functions in it.

I think all my functions in my "game" function are not running and I have no idea why and how to fix that??

4 Answers

Paul van Loon
Paul van Loon
6,493 Points
Paul van Loon
Paul van Loon
6,493 Points

Hi Tushar,

In you game function you are calling an if statement "if(gameEnd=false && turns%2==0)". The "gameEnd=false" needs a double == to pass.

Kind regards, Paul

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

Thanks but now it's really behaving weirdly, why is that?

Paul van Loon
Paul van Loon
6,493 Points
Paul van Loon
Paul van Loon
6,493 Points

Hi Tushar,

At the moment i do not have the time overlook the whole code, but as a starter, the first thing that caught my eye in your game function is that your DrawIcon function is passing the parameter "id" but this parameter is unknown to that function. Let me rephrase it more simple.

When you click a square the game function is being called.( "$('.square').on('click',game);" ) . Then in the game function you are calling DrawIcon(id). In this proces the id is not collected. In the game function put this code to collect the id "var id =$(this).attr("id");".

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

ok a slight improvement, still not working properly. I would really appreciate if you could take a look at my code, Thanks!

Steven Parker
Steven Parker
241,811 Points
Steven Parker
Steven Parker
241,811 Points

It used to at least place the icons on click - what did you change?

:point_right: At first glance, I notice that symbDisp is referring to this but it's not an object method or an event handler. Try making it take an argument and then when you call it from an event hander, pass this to it.

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

Ya it used to, but when I included the second player as a computer, things got really messy and I can't find my way out. I have build a few things but this darn tic tac toe is killing me, I never thought such a simple game can be so much frustrating.

I have all my functions and I don't know how can I combine them, that's the issue really. I want when I click the game-board(class ="square") the game function runs which has all the functions in it.

I understand what you are saying, ya it makes sense but passing "this" ??

if you mean this, still not working ;/

function game(){
    var id =$(this).attr("id");
    symbDisp(this); // done
    winCheck();
    turns+=1;
    if(gameEnd==false && turns%2==0){
      AI();
      DrawIcon(id);
      winCheck();
      turns+=1;}
  }
Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

What am I doing wrong?? How can I combine all these functions??

Paul van Loon
Paul van Loon
6,493 Points
Paul van Loon
Paul van Loon
6,493 Points

Hi Tushar,

The thing that goes wrong in your game is the AI. Basically on every click on a square the game function is called. This means the AI is being called on every click and so there is no seperation between the computer turn and the players turn. It executes both at the same time. Also the satements in your AI ar incorrect it says if square is not filled with player and not filled with comp. Although this will work for empty square's it will also work for filled ones. If you ask is the square filled with not player AND not comp your filled square's will also pass this argument. This is because if a square is filled with for example player, it is not filled with comp and therefore still true. So instead of asking for AND(&&) you could try OR(||) in your statement. If you want to check if its empty you can use this statement in jQuery case $('#6').is(':empty'):

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

Bro but "||" "or" won't work, if I used "or", it will keep on toggling between the icons in the fist square only

I tried $('#6').is(':empty'):, but same result- not working.

function AI(){
     switch (true) {
    case $('#1').is(':empty'):
      $('#1').text(pTurn);
      break;
    case $('#2').is(':empty'):
      $('#2').text(pTurn);
      break;
    case $('#3').is(':empty'):
      $('#3').text(pTurn);
      break;
    case $('#4').is(':empty'):
      $('#4').text(pTurn);
      break;
    case $('#5').is(':empty'):
      $('#5').text(pTurn);
      break;
    case $$('#6').is(':empty'):
      $('#6').text(pTurn);
      break;
    case $('#7').is(':empty'):
      $('#7').text(pTurn);
      break;
    case $$('#8').is(':empty'):
      $('#8').text(pTurn);
      break;
    case $('#9').is(':empty'):
      $('#9').text(pTurn);
      break;
  }
  }