How to stop a function from another function

Question

In the following code I am trying to stop the function color-blast when the user click on the button reset . I have an even-listener function for the rest button but can someone help me to add some code to the function inside the Event listener for the reset button that stops the color-blast function .

var p1Button = document.querySelector("#p1");
var p2Button = document.getElementById("p2");
var resetButton = document.getElementById("reset");
var p1Display = document.getElementById("p1Display");
var p2Display = document.getElementById("p2Display");
var numInput = document.querySelector("input");
var winningScoreDisplay = document.getElementById("winningValue");
var p1Score = 0;
var p2Score = 0;
var gameOver = false;
var winningScore = 5;

p1Button.addEventListener("click", function(){
 if (!gameOver) {
    p1Score++;
    if(p1Score === winningScore) {
        p1Display.classList.add("winner");
        gameOver = true;
        colorBlast();
       }
    p1Display.textContent = p1Score;
    }
})


p2Button.addEventListener("click", function() {
    if (!gameOver) {
    p2Score++;
    p2Display.textContent = p2Score;  
    if (p2Score === winningScore) {
        p2Display.classList.add("winner");
        gameOver = true;
        colorBlast();  
    }
}
})

resetButton.addEventListener("click", function(){
   reset();
})

numInput.addEventListener("change", function() {
  winningScoreDisplay.textContent = this.value;
  winningScore = Number(numInput.value);
  reset();
});

function reset() {
    p1Score = 0;
    p2Score = 0;
    p1Display.textContent = p1Score;
    p2Display.textContent = p2Score;
    p1Display.classList.remove("winner");
    p2Display.classList.remove("winner");
    gameOver = false;
   
}

function colorBlast() { 


    var colors = ['black', 'green', 'orange', 'pink', 'yellow', 'red'];
  
    var colorIndex = 0;
    
   {
    setInterval(function(){
     
      document.body.style.backgroundColor = colors[colorIndex++];
  

      colorIndex %= colors.length;
      }, 1000)}
  };

.winner {
    color: green;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Food counter</title>
        <link rel="stylesheet" href="foodCounter.css">
    </head>
    <body id="start">
        <h1>
            <span id="p1Display">0</span>
               to
            <span id="p2Display">0</span>
        </h1>
        
        <p>Eating to <span id= "winningValue">5</span></p>

        <input type="number">
        <button id="p1">Player 1</button>
        <button id="p2">Player 2</button>
        <button id="reset">reset</button>
    <script type="text/javascript" src="foodCounter.js"></script>
    </body>
</html>

_“I am trying to stop the function color-blast”_ - no, not really. That one ran only one single time to begin with, there _is_ nothing to “stop”. What you actually want to do, is clear the interval that currently executes your anonymous function every 1000 milliseconds. https://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript — CBroe, Jul 07 '20 at 10:51
you want stop set setInterval you can see answer [here](https://stackoverflow.com/a/16437226/12925440) — to-b, Jul 07 '20 at 10:52

score 1 · Answer 1 · answered Jul 07 '20 at 10:51

You should use clearInterval in reset function

var p1Button = document.querySelector("#p1");
var p2Button = document.getElementById("p2");
var resetButton = document.getElementById("reset");
var p1Display = document.getElementById("p1Display");
var p2Display = document.getElementById("p2Display");
var numInput = document.querySelector("input");
var winningScoreDisplay = document.getElementById("winningValue");
var p1Score = 0;
var p2Score = 0;
var gameOver = false;
var winningScore = 5;
var colorBlastInterval;

p1Button.addEventListener("click", function(){
 if (!gameOver) {
    p1Score++;
    if(p1Score === winningScore) {
        p1Display.classList.add("winner");
        gameOver = true;
        colorBlast();
       }
    p1Display.textContent = p1Score;
    }
})


p2Button.addEventListener("click", function() {
    if (!gameOver) {
    p2Score++;
    p2Display.textContent = p2Score;  
    if (p2Score === winningScore) {
        p2Display.classList.add("winner");
        gameOver = true;
        colorBlast();  
    }
}
})

resetButton.addEventListener("click", function(){
   reset();
})

numInput.addEventListener("change", function() {
  winningScoreDisplay.textContent = this.value;
  winningScore = Number(numInput.value);
  reset();
});

function reset() {
    p1Score = 0;
    p2Score = 0;
    p1Display.textContent = p1Score;
    p2Display.textContent = p2Score;
    p1Display.classList.remove("winner");
    p2Display.classList.remove("winner");
    gameOver = false;
document.body.style.backgroundColor = 'white';
   clearInterval(colorBlastInterval);
}

function colorBlast() { 


    var colors = ['black', 'green', 'orange', 'pink', 'yellow', 'red'];
  
    var colorIndex = 0;
    
   {
    colorBlastInterval = setInterval(function(){
     
      document.body.style.backgroundColor = colors[colorIndex++];
  

      colorIndex %= colors.length;
      }, 1000)}
  };

.winner {
    color: green;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Food counter</title>
        <link rel="stylesheet" href="foodCounter.css">
    </head>
    <body id="start">
        <h1>
            <span id="p1Display">0</span>
               to
            <span id="p2Display">0</span>
        </h1>
        
        <p>Eating to <span id= "winningValue">5</span></p>

        <input type="number">
        <button id="p1">Player 1</button>
        <button id="p2">Player 2</button>
        <button id="reset">reset</button>
    <script type="text/javascript" src="foodCounter.js"></script>
    </body>
</html>

score 0 · Answer 2 · answered Jul 07 '20 at 10:55

0

If you want to stop a setInterval, you can use clearInterval. However, to do this you will want to make your setInterval a global variable. Somewhere in your code, initialise it as var myInterval; so it has global scope. Then, in your colorBlast function, at the setInterval have:

myInterval = setInterval(function(){
     
      document.body.style.backgroundColor = colors[colorIndex++];
  

      colorIndex %= colors.length;
      }, 1000)}

When you want to stop the function, in your event listener, call clearInterval(myInterval);

answered Jul 07 '20 at 10:55

Leaf the Legend

471
3
9

See Omid Nikrah's answer – Leaf the Legend Jul 07 '20 at 10:57
resetButton.addEventListener("click", function(){ reset(); }) I want to add a function inside this function , so when the user click reset, it stops the function. – Anurag Prakash Jul 07 '20 at 11:38
`resetButton.addEventListener("click", function(){clearInterval(myInterval); })`. This will clear the interval, "stopping" your colorBlast function – Leaf the Legend Jul 07 '20 at 11:44
Thanks, if I want to change the background back to white ? after the set Interval functions stops , the background remains the color it was before hitting the reset button . – Anurag Prakash Jul 07 '20 at 12:19
Try just adding a line like this: `resetButton.addEventListener("click", function(){clearInterval(myInterval); document.body.style.backgroundColor = 'white';})` – Leaf the Legend Jul 07 '20 at 12:26

How to stop a function from another function

2 Answers2