How to stop javascript from executing after clicking stop button?

Question

    <script>
function timer(duration, elementId, scoreID, mistakesID){
  var start = Date.now();
  var min, sec, diff;
  var scoreComputed = false;

  function timerCompute(){
    diff = duration - (((Date.now() - start) / 1000) | 0);

    min = ( diff / 60 ) | 0;
    sec = ( diff % 60 ) | 0;

    //If less than 10, add zero in front of it to keep tens place
    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;

    elementId.textContent = min + ":" + sec;

    if ( diff <= 0 ){
      elementId.textContent = "0:00";

      if (!scoreComputed){
        score /= (duration / 60);
        score = Math.round(score);
        scoreComputed = true;
      }

      scoreID.textContent = score;
      document.getElementById("usertext").readOnly = true;

      $("#resultsContainer").fadeIn(1500);

      if(mistakes.length > 0){
        var mistakesStr = "";

        for(var i = 0; i < mistakes.length; i++){
          mistakesStr += i > 0 ? ", " : "";
          usertextArr[mistakes[i]] = usertextArr[mistakes[i]] === "" ? "blank" : usertextArr[mistakes[i]];
          mistakesStr += usertextArr[mistakes[i]] + " instead of " + textArr[mistakes[i]];;
        }
        mistakesID.textContent = mistakesStr;
        $("#mistakesContainer").fadeIn(1500);
         $('.type-test-wrapper').css("filter","blur(3px)");
      }
      return;
    }
  };
  timerCompute();
  setInterval(timerCompute, 1000);
}

var timerStarted = false;
$('#usertext').on('keydown', function() {

  var time = 60 * 0.1,
  display = document.querySelector('#time');
  scoreDisplay = document.querySelector('#score');
  mistakesDisplay = document.querySelector('#mistakes');
  if ( timerStarted === false ){
    timer(time, display, scoreDisplay, mistakesDisplay);
    typeTest();
    timerStarted = true;
  }
});
</script>

The above script is from a typing test. When the typing test ends, the above script fades in a result box. I was trying to modify the code. I want to add a close button to the result box so that user can close the box after he viewed the result. So I added the below code to close the result box.

<script type='text/javascript'>
jQuery(document).ready(function($){
$('.close-btn, body').click(function(){
$('.type-test-wrapper').css("filter","blur(0px)");
$('#resultsContainer, #mistakesContainer').stop().fadeOut('medium');
});

});
</script>

The problem I am facing is that when I click on close button, the box fades out #resultContainer, #mistakesContainer but as soon the box gets faded, it again fades in. No matter how many times i close the box, it fades in again and again. I want that once user click on close button the box should not get displayed again. How to fix the code so that once the the box fades out, the first code doesn't again fades in the box. I am new at javascript. Thank you for help.

Live webpage here https://htmlpreview.github.io/?https://raw.githubusercontent.com/dp121112/type-testing/master/test.html

sir i have provided a working link of webpage. please see source. please help sir — user3388450
– user3388450, Commented Oct 1, 2017 at 17:28
I tried that. Github prevents us from seeing the underlying code for the site. The markup looks fairly simple just update your question or better yet provide a code snippet. — Master Yoda
– Master Yoda, Commented Oct 1, 2017 at 17:32

Uttam Ughareja · Accepted Answer · 2017-10-01 17:15:23Z

1

I think you're not clearing the interval try to assing interval as follow.

var intrvl= setInterval(timerCompute, 1000);

and clear it when its done

scoreID.textContent = score;
document.getElementById("usertext").readOnly = true;
$("#resultsContainer").fadeIn(1500);
clearInterval(intrvl);

answered Oct 1, 2017 at 17:15

Uttam Ughareja

1,4952 gold badges21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to stop javascript from executing after clicking stop button?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related