If I’m not mistaken, the following line is the problems:
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.