Tic tac toe project - Issue with refreshing variables without refreshing the page [SOLVED]

I have searched through the forum, but can’t apply the solutions to mine yet.

As the title says I don’t know how to stop


function in my code after the first run of the game is done and I press the start button again to start a new game without refreshing the whole page.

If I have to refresh the page, how to do it? If I have to just reset variables, how to do it?

To me it seems that when I start button for the second time, it appears as if two instances of play() function are running, in any case I am very confused.

Here is the codepen: https://codepen.io/kloba1004/full/XWKbrXY

Here is github: https://github.com/kloba1004/project-tic-tac-toe

what i do is have a module game that contains all the important variables of the game, and return the methods needed to access or modify them.

about your play() factory function
maybe the problem is that you cant use the garbage colector. When a function, variable or object isnt referencied in the code the garbage collector takes care of it deleting it.

But inside of your play() factory function you asign an eventListener the play() factory function is always referencied.
When you call another time play, it adds eventListeners to the element that already have eventListeners. Adding multiple eventListeners with the same name is posible, so you elements reference the first and the second factory function, so the garbage collector cant delete the first object play() returned.

Also if the function is running you the garbage colector doesnt work, and pressing the button counts as calling another function.
I supose the factory function mission is only define methods and variables to return them.

This is because you can do

 let factory= play();

and the next time you run this line factory will be a new object and the proevios goes to the gabage collectior. If play is runing some code when you call this line probably the garbage collector won’t work.

If any part of this is confusing or isnt what you are searching ask again.

Hope this will help.

1 Like

Thank you. I am coming from non CS-background so all this stuff is new to me.

I never even knew about the existence of the garbage collector, but now that you have mentioned it, I have googled it out.

So, what you are trying to say, the bug in the code happens because my objects are still being referenced and garbage collector can’t do its job properly.

I will edit my post once I refactor my code. I am very new to OOP so I tried my best to include IIFE and factory functions but in the process, got it bugged.

EDIT: @fernandopaz1 Thank you. I have solved the problem, but since I am on another laptop which has only the editor installed, can’t push the changes online yet. In the end, I have pulled out form event listener as well as many variables out of startButton event listener because it all created a huge mess in the context of referencing memory locations of old objects.

EDIT2: Here is the github page link: https://kloba1004.github.io/project-tic-tac-toe/
Implementing all the lessons stuff so far was hard at start. Haven’t found a proper way or idea to implement inheritance here, but definitely will keep it in mind for the future.

1 Like