How to stop an "setInterval" from HTML

Question

This Code shows an growing up Intervaltimer. I'm using setInterval for it, but i don't know how to stop ist.

There is a funktion called ende(). Can i stop the Intervaltimer with this funktion?

The Reason to stop it is that when i hit the button(at the bottom) again then a second Timer starts. I don't know how to say it, test it out.

```
<!DOCTYPE html>
<html>
 <head>
  <title>Interval Timer</title>
 
  <style>
   @font-face {
    font-family: sevenSegment;
    src: url(SevenSegment.ttf);
   }
  
   h1{
    font-family: sevenSegment;
    font-size: 7em;
    color: #969696;
    line-height: 0%;
   }
   h2{
    font-family: sevenSegment;
    font-size: 5em;
    color: #969696;
    line-height: 0%;
   }

   .container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50% );
   }
   
   .button1{
    font-family: sevenSegment;
    font-size: 1em;
    color: #969696;
    
      border: none;
   }
  </style>

 </head>
 <body>
  <div class="container">


   <table>
     <tr>
      <td><h2 id="des">WORK</h2></td>       
     </tr>
     <tr>
       <td><h1 id="count">00:00:45</h1></th>
     </tr>
     <tr>
      <td><h2 id="des">REST</h2></td>
      </tr>
     <tr>
       <td><h1 id="count2">00:00:15</h1></td>
     </tr>
      <tr>
        <td><h2 id="des">Pause</h2></td>
      </tr>
      <tr>
        <td><h1 id="count3">00:00:25</h1></td>
      </tr>
   </table>
   <button class="button1" type="button" id="work">Work</button>
   <button class="button1" type="button" id="rest">Rest</button>
   <button class="button1" type="button" id="pause">Pause</button>
  </div>
  <script type="text/javascript">

   document.querySelector('#work').addEventListener('click', work);
   document.querySelector('#rest').addEventListener('click', rest);
   document.querySelector('#pause').addEventListener('click', pause);

   function work(argument) {
    var counter = 45;
    var status = 0;
 /*   function ende(argument) {
     
     if (){
      counter = 15;
     }
     if (){
      counter = 45;
     }
     if (){
      counter = 25;
     }
     if (){
      counter = "mal sehen";
     }
    }*/
    setInterval( function(){
     counter--;

     if (counter >= 10) {
      id = document.getElementById("count");
      id.innerHTML = "00:00:" + counter + "";
      if (counter <= 0) {
       ende(id);
      }
     }
     if (counter < 10){
      id = document.getElementById("count");
      id.innerHTML = "00:00:0" + counter + "";
      if (counter <= 0) {
       ende(id);
      }
     }

    }, 1000);
   }
   function rest(argument) {
    var counter = 15;
    var status = 0;
 /*   function ende(argument) {
     
     if (){
      counter = 15;
     }
     if (){
      counter = 45;
     }
     if (){
      counter = 25;
     }
     if (){
      counter = "mal sehen";
     }
    }*/
    setInterval( function(){
     counter--;

     if (counter >= 10) {
      id = document.getElementById("count2");
      id.innerHTML = "00:00:" + counter + "";
      if (counter <= 0) {
       ende(id);
      }
     }
     if (counter < 10){
      id = document.getElementById("count2");
      id.innerHTML = "00:00:0" + counter + "";
      if (counter <= 0) {
       ende(id);
      }
     }

    }, 1000);
   }
   function pause(argument) {
    var counter = 25;
    var status = 0;
 /*   function ende(argument) {
     
     if (){
      counter = 15;
     }
     if (){
      counter = 45;
     }
     if (){
      counter = 25;
     }
     if (){
      counter = "mal sehen";
     }
    }*/
    setInterval( function(){
     counter--;

     if (counter >= 10) {
      id = document.getElementById("count3");
      id.innerHTML = "00:00:" + counter + "";
      if (counter <= 0) {
       ende(id);
      }
     }
     if (counter < 10){
      id = document.getElementById("count3");
      id.innerHTML = "00:00:0" + counter + "";
      if (counter <= 0) {
       ende(id);
      }
     }

    }, 1000);
   }
   function ende(id){
    id.innerHTML = "00:00:00"
   }
  </script>
 </body>
</html>

Interval Timer

    <style>
        @font-face {
            font-family: sevenSegment;
            src: url(SevenSegment.ttf);
        }

        h1{
            font-family: sevenSegment;
            font-size: 7em;
            color: #969696;
            line-height: 0%;
        }
        h2{
            font-family: sevenSegment;
            font-size: 5em;
            color: #969696;
            line-height: 0%;
        }

        .container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50% );
        }

        .button1{
            font-family: sevenSegment;
            font-size: 1em;
            color: #969696;

            border: none;
        }
    </style>

</head>
<body>
    <div class="container">


        <table>
          <tr>
            <td><h2 id="des">WORK</h2></td>             
          </tr>
          <tr>
            <td><h1 id="count">00:00:45</h1></th>
          </tr>
          <tr>
            <td><h2 id="des">REST</h2></td>
           </tr>
          <tr>
            <td><h1 id="count2">00:00:15</h1></td>
          </tr>
           <tr>
             <td><h2 id="des">Pause</h2></td>
           </tr>
           <tr>
             <td><h1 id="count3">00:00:25</h1></td>
           </tr>
        </table>
        <button class="button1" type="button" id="work">Work</button>
        <button class="button1" type="button" id="rest">Rest</button>
        <button class="button1" type="button" id="pause">Pause</button>
    </div>
    <script type="text/javascript">

        document.querySelector('#work').addEventListener('click', work);
        document.querySelector('#rest').addEventListener('click', rest);
        document.querySelector('#pause').addEventListener('click', pause);

        function work(argument) {
            var counter = 45;
            var status = 0;
/*          function ende(argument) {

                if (){
                    counter = 15;
                }
                if (){
                    counter = 45;
                }
                if (){
                    counter = 25;
                }
                if (){
                    counter = "mal sehen";
                }
            }*/
            setInterval( function(){
                counter--;

                if (counter >= 10) {
                    id = document.getElementById("count");
                    id.innerHTML = "00:00:" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }
                if (counter < 10){
                    id = document.getElementById("count");
                    id.innerHTML = "00:00:0" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }

            }, 1000);
        }
        function rest(argument) {
            var counter = 15;
            var status = 0;
/*          function ende(argument) {

                if (){
                    counter = 15;
                }
                if (){
                    counter = 45;
                }
                if (){
                    counter = 25;
                }
                if (){
                    counter = "mal sehen";
                }
            }*/
            setInterval( function(){
                counter--;

                if (counter >= 10) {
                    id = document.getElementById("count2");
                    id.innerHTML = "00:00:" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }
                if (counter < 10){
                    id = document.getElementById("count2");
                    id.innerHTML = "00:00:0" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }

            }, 1000);
        }
        function pause(argument) {
            var counter = 25;
            var status = 0;
/*          function ende(argument) {

                if (){
                    counter = 15;
                }
                if (){
                    counter = 45;
                }
                if (){
                    counter = 25;
                }
                if (){
                    counter = "mal sehen";
                }
            }*/
            setInterval( function(){
                counter--;

                if (counter >= 10) {
                    id = document.getElementById("count3");
                    id.innerHTML = "00:00:" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }
                if (counter < 10){
                    id = document.getElementById("count3");
                    id.innerHTML = "00:00:0" + counter + "";
                    if (counter <= 0) {
                        ende(id);
                    }
                }

            }, 1000);
        }
        function ende(id){
            id.innerHTML = "00:00:00"
        }
    </script>
</body>

Welcome to SO. Two suggestions before asking. 1) Read the setInterval documentation which will introduce you to `clearInterval` and 2) Try searching terms like "stop setInterval" . See [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) — charlietfl, Jun 07 '20 at 12:19

Wais Kamal · Accepted Answer · 2020-06-07T12:28:22.663

1

Store the interval in a variable, then use that variable to stop the interval. However, since you are starting the interval inside a function and stopping it inside another function, you need to use a global variable. First declare a global variable x:

var x;

Then, replace:

setInterval(...

by:

x = setInterval(...

To stop the interval, just call

clearInterval(x);

edited Jun 07 '20 at 12:28

answered Jun 07 '20 at 12:16

Wais Kamal

5,858
2
17
36

Poor practice declaring global variables this way. Also it does not necessarily need to be a *global*...so long as it is in scope where needed – charlietfl Jun 07 '20 at 12:23
@charlietfl why poor way? – Wais Kamal Jun 07 '20 at 12:24
At least use `var` or `let` – charlietfl Jun 07 '20 at 12:25
I already stated it in the post: declare a global variable x. – Wais Kamal Jun 07 '20 at 12:26
OK... suggest showing the declaration then since OP is clearly a beginner – charlietfl Jun 07 '20 at 12:27
Sure. Will edit accordingly. – Wais Kamal Jun 07 '20 at 12:27

How to stop an "setInterval" from HTML

1 Answers1