Hi guys!
I’m working on the Tic-Tac-Toe problem at the moment. It’s been a pretty interesting project, but so far I’ve only really done the bare bones of the game, making the moves possible and deciding if a user has won.
I am trying to implement a reset function for when the game is over - with any given outcome there is a clickable Div which covers the game board, announcing the winner. Now, normally when you click you should return to the start screen (which works the first time), but if you play through the game again that same div does not appear, no matter the outcome the second time. I can’t seem to figure out why.
Here is the CodePen in question for it. If it’s something simple I’d love to hear it, but even a nudge towards the answer would be a big help!
See the Pen Tic-Tac-Toe Game by Thibault (@thibaultk) on CodePen.
1 Like
Haiiiyo!
If I’m not mistaken, the following line is the problems:
$("#end-screen, #finish-screen").html("");
The reasonis that #finish-screen is nested within #end-screen—so setting the innerHTML of both of those elements to "" actually removes <div class="#finish-screen></div> element completely—that’s why it “works” only once.
Given that it has taken some time for anyone to leave comment about this, and that a few people have already looked at your code, I just want to add a bit more for future reference: as your projects become more complex and your code gets bulkier, your chance of getting a useful response on something non-specific like this becomes increasingly low.
In the following order, this is what I did to find the issue:
- Based on the fact that it works once, the issue must happen between the end-screen/finish-screen appearing and when anew game starts; and from this, I asssumed that it could be one of the following:
- There is no flag that indicates the current state of the game (which is a wrong assumption)
- The flag does not update correctly (which is also wrong)
- I placed a few
console.log() in the function for checking whether or not the board is full (no winner) and the function that is executed when a player wins—all seemed to be fine
- I then played through the game while paying attention to what elements change towards the end of the game, when the restart “button” is clicked, and when the game starts again
- I got ahead of myself and thought it could be the animations, so I started disabling lines involved with animations and show/hide toggling
- Turns out that I was wrong, so I went back to Step 3
- After playing through a few times, I finally noticed that
.finish-screen disappears completely and never comes back
- It took me another 5 minutes or so to figure out that is because of the line that I pointed out above
By the time I found the problem and did tests to make sure that I’m not pulling things out of thin air, it has already taken about 15 minutes; if you add another 10 minutes for typing this then that’s almost half an hour.
I’m not saying/pointing out any of this to discourage you (absolutely not!) from asking questions or reason why anyone wouldn’t want to help. In fact, you should ask questions and I’m sure a lot of people wanted to help; it’s just that some types of question require a lot of commitment from others and you may never even get a response particularly if it’s about finding a needle in a haystack that someone else made—and I find your code relatively easy to follow (admittedly, I have given up on trying to help before simply because someone else’s code is too difficult to follow).
In any case, I hope that helps and I sincerely hope that I don’t come across as being abrasive. I’m sure someone else with more experience would be able to offer opinions on how to strike a balance between when to ask a question and how to ask a bug-related question.
Good luck with the rest of the project. 
EDIT: Typos. There are probably more.
3 Likes
Hi @honmanyau,
Thanks very much for your help, it looks like you’re right - I guess I tried to overcompensate with that line of code. Not really necessary when programming!
I wanted to thank you for taking the time out to help me. Especially when it comes to the challenges, I understand that it becomes much more difficult to ask for help, and to be frank I only half-expected to get an answer considering how much code there was to sift through. I really appreciate that you went out of your way to help, especially when it can take so long just to isolate a simple issue.
If anything, this has helped me to continue commenting code as much as possible so that bugs like this are easier to find (not that it would have helped that much for this particular bug!). Much like you, I was stuck between whether I had done the animations wrong or messed up the ‘reset’ click function at the end of the code, and was ready to pull my hair out over it after about an afternoon of modifying code without success.
Just wanted to express my gratitude for your help - I have no idea how long it would have taken to find by myself.
1 Like
You are welcome! And I’m glad that the response doesn’t come across as abrasive (perhaps I’m over thinking it a little)!
When I get stuck I tend to walk away and have a coffee, turn off music, or go for a short walk—they seem to help me looking at things from a different perspective. Keep going at it for hours and getting nowhere is extremely counter-productive and demotivating—and, in my opinion, you absolutely did the right thing by asking.
There is actually one more thing on the animation—I personally tend to build my projects with minimal styling and effects because I find them distracting. If an animation has absolutely no effect on functionality, I would say leave it until the end. And if you absolutely must have the animation now, you could consider prototyping it in a separate Pen and hook it up later.
CodePen’s edit is great but I recommend switching to a text editor (such as Atom, Sublime and Visual Studio Code) for larger projects (@owel has some really good advice in this thread for working on larger projects, too).
If you are following the curriculum linearly and don’t already use Git, I think you are at the point where spending a couple of hours to learn how to use Git/GitHub is worthwhile, too!
Good luck with the project again! Looking forward to see the finished game.