CODEWITHSUNDEEP
javascript
Anurag Prakash
Anurag Prakash

Reputation: 9

How to stop a function from another function

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>

Upvotes: 0

Views: 60

Answers (2)

Leaf the Legend
Leaf the Legend

Reputation: 481

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);

Upvotes: 0

Omid Nikrah
Omid Nikrah

Reputation: 2480

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>

Upvotes: 1

Related Questions