请告诉我如何在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!!")
        }
}

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!!")
    }
}

Answer 2

I think there's no sentence which resets the counter.

maybe you need another if condition to reset the counter to 0 when it hits 5

Answer 3

just put statement to reset counter and remove effects try the snippet

 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;."). counter = '0': } else { document.getElementById('roger').src = "https?//encrypted-tbn0:gstatic;com/images.q=tbn.ANd9GcTVL3aKJXXOdfviO2sx5h_lfDwpUsUs75BIcdWoFt72V_o6Au0&s": } 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!!") } } }

 #LifeOrDeath { font-size:1rem; } #theme { position:relative; width:50%; margin:auto; text-align:center; } #roger { position:relative; height:40vh; } #lightSImg { position:relative; height:40vh; }

 <body id="theme"> <h1 id="LifeOrDeath">Flip tHE LIGHT Switch </h1> <img id="roger" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVL3aKJXXOdfviO2sx5h_lfDwpUsUs75BIcdWoFt72V_o6Au0&s"> <p id="counter">0</p> <img onclick="flipSwitch()" id="lightSImg" src="https://i.stack.imgur.com/LCUJZ.jpg"> <script src="TEST.JS"></script> </body>

Answer 4

You just simply rest your counter variable after every 5 clicks.

Working code

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!!")
        counter = 0; // Add this line
     }
}