javascript - Please tell me how to repeat this process in JS?

Question

Clicking 5 times on the light switch makes a chicken come out and an alert pop ups, after clicking the 5th time, the counter just keeps on adding and it doesnt restart. You probably already know my question, how do i make it restart the process each 5th click? I just want it do the same thing every 5 clicks...

This is the code below and here is the website for reference..www.deko.live Help would be appreciated very much.

var flip = false;
var counter = 0;
function flipSwitch() {
    var themeColor = "#EEE8AA";
    var bright = "brightness(100%)";
    var lightS = "rotate(0deg)";
    var word = "PALI";
    var wordColor = "black"
    if (flip) {
        themeColor = "#EEE8AA";
        bright = "brightness(100%)";
        lightS = "rotate(0deg)";
        word = "ON";
        wordColor = "black";
        flip = false;
        counter++;
     } else {
        themeColor = "dimGray";
        bright = "brightness(50%)";
        lightS = "rotate(180deg)";
        word = "OFF";
        wordColor = "white";
        flip = true;
        counter++;
    }
    document.getElementById("theme").style.backgroundColor = themeColor;
    document.getElementById("roger").style.filter = bright;
    document.getElementById("lightSImg").style.transform = lightS;
    document.getElementById("lightSImg").style.filter = bright;
    document.getElementById("LifeOrDeath").innerHTML = word;
    document.getElementById("LifeOrDeath").style.color = wordColor;
    document.getElementById("counter").innerHTML = counter;
    surprise();
}

function surprise() {

     if (counter === 5) {
        document.getElementById("roger").src = "https://vignette.wikia.nocookie.net/spongebob/images/0/00/Roger_the_chick.png/revision/latest?cb=20141201044139"
        document.getElementById("counter").innerHTML = "Surprise!"
        alert("WHOAA!!")
        }
}

question from:https://stackoverflow.com/questions/65877802/please-tell-me-how-to-repeat-this-process-in-js

Answer 1

It seems that the value of counter never resets.

One of the solution is

function surprise() {

     if (counter === 5) {
        counter = 0;  // add this line
        document.getElementById("roger").src = "https://vignette.wikia.nocookie.net/spongebob/images/0/00/Roger_the_chick.png/revision/latest?cb=20141201044139"
        document.getElementById("counter").innerHTML = "Surprise!"
        alert("WHOAA!!")
    }
}

Alternatively you may also try

function surprise() {

     if (counter % 5 === 0) {
        document.getElementById("roger").src = "https://vignette.wikia.nocookie.net/spongebob/images/0/00/Roger_the_chick.png/revision/latest?cb=20141201044139"
        document.getElementById("counter").innerHTML = "Surprise!"
        alert("WHOAA!!")
    }
}