title: In javascript, I not success to stop my loop with clearIntereval for setInterval
body: <p>I have a countdown who will display a new piture every 5 secondes >> it approximatively work, but at the end of the array composed by 10 pictures, I am not able to stop countdown + stop to display picture with the clearInterval...</p>
  
  <p><a href="https://i.stack.imgur.com/VMOCr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VMOCr.png" alt="enter image description here"></a></p>
  
  <p>My script </p>
  
  <pre><code>&lt;script&gt;
        var myImage = document.getElementById ("mainImage");
        var imageArray = ["img/lunge.png", 
                          "img/plank.png", 
                          "img/push-up-and-rotation.png", 
                          "img/push-up.png", 
                          "img/side-plank-left.png", 
                          "img/side-plank-right.png", 
                          "img/squat.png", 
                          "img/step-up-onto-chair.png", 
                          "img/triceps-dip-on-chair.png", 
                          "img/wall-sit.png"]
        var imageIndex = 0;
        $(document).ready(function () {
            $('#submit').click(function () {
                $('.timer').circularCountDown()
                var inter = setInterval (changeImage, 5000);
                function changeImage () {
                    myImage.setAttribute ("src", imageArray [imageIndex]);
                    document.getElementById("circle").innerHTML = "";
                    imageIndex++;
                    if (imageIndex &gt;= imageArray.length) {
                        imageIndex =0;
                        }
                    $('.timer').circularCountDown()
                    }
                function stopinter () {
                    clearInterval (inter);
                }
            })
        })
    &lt;/script&gt;
  </code></pre>
  
  <p>Any idea about how to do of improve my script ?</p>
  
  <p>Thank you,</p>
  
  <p>Olivier</p>