Why the countdown doesn't decrease every seconds?

#1

Hi everyone :slight_smile:

I created a working countdown but I want to transform my code in OOP. When I click on the “run” button, everything is correct but the countdown doesn’t decrease automatically every seconds.

You can see the past working countdown code with no OOP.

Could you guys take a look? :wink: Thanks


class Timer {

    constructor() {
        this.counter = document.getElementById("counter");
        this.button = document.getElementById("button");
        this.buttonRemove = document.getElementById("remove");
        this.secondes = 13;
        this.minutes = 0;
        this.current_secs;
        this.current_mins;
        this.buttonClick();
        this.removeClick();
        this.ifstorage();
    }

    ifstorage() {
        if (sessionStorage.getItem("Secondes")) {
            this.secondes = sessionStorage.getItem("Secondes");
            this.minutes = sessionStorage.getItem("Minutes");
            this.running();
        }
    }

    removeStorage() {
        sessionStorage.clear();
    }

    storage() {
        sessionStorage.setItem("Secondes", this.current_secs);
        sessionStorage.setItem("Minutes", this.current_mins);
    }

    buttonClick() {
        this.button.addEventListener("click", () => {
            // secondesCounting();
            this.running();
        });
    }

    removeClick() {
        this.buttonRemove.addEventListener("click", () => {
            this.removeStorage();
        });
    }

    secondesCounting() {
        if (this.secondes > 0) {
            this.secondes--;
            this.current_secs = this.secondes;
            this.current_mins = this.minutes;
            this.addTextContent()
            this.storage();
        } else if (this.secondes == 0 && this.minutes > 0) {
            this.secondes = 59;
            this.minutes--;
            this.current_secs = this.secondes;
            this.current_mins = this.minutes;
            this.addTextContent();
            this.storage();
         } else if (this.secondes == 0 && this.minutes == 0) {
            clearInterval();
            sessionStorage.clear();
            this.counter.textContent = "fin";
        }
    }

    running() {
        this.secondesCounting();
        setInterval(this.secondesCounting, 1000);
    }

    addTextContent() {
        this.counter.textContent = this.current_mins + ":" + this.current_secs;
    }
}

let countdown = new Timer();


<button id="button">Run</button><br><br>
<div id="counter"></div><br><br>
<button id="remove">Remove</button>
#2

I’m going to give you a little bit of homework. Add the following to the very beginning of the secondesCounting method:

console.log(this);

Open the dev console, click the button and watch what happens.

#3

Yes I did it, what do I have to know about that?

#4

I had you print the value of this every time that method is called. Look at what is being printed in the console. This is the same this that your method has access to. Does your method have access to this.secondes, this.minutes, etc…?

#5

Ok I know what you mean thank you!

So how can I do in a better way?

#6

I used an arrow function and it works:

setInterval(() => this.secondesCounting(), 1000);

Is that the good way?

#7

Perfect, that is exactly what you needed to do. Do you understand why it worked with the arrow function? It is a very important concept so be sure that you understand what is happening here.

#8

Thank you for asking.
I understand roughly but I’m not sure to really understand this concept.

Do you have an article or something else to help me understand it?

#9

Here is one I found and it even uses the setInterval function as the example.

#10

Great thank you!

I need to do something else but I don’t know how :
When the countdown is running and I click on the button a second time (without reloading the page), the countdown decreases in a weird way…
How to manage that?

#11