title: Clicking Button Removes Timer
body: <p>I have a popup which automatically loads when the page is loaded, it has a timer on the close button whose time on it varies depending on how many times the popup was viewed by the user. It also has a print button and the popup can be called back up if you press the key 'g'.</p>
  
  <p>My focus is on the 'Print' button. If the 'Print' button has been clicked, I want the value of the timer to forever be 0, aka basically disappear forever. I have tried <code>clearInterval()</code> but that has not appeared to of worked and I can't find anything else to help me out.</p>
  
  <p>Please note the timer does not appear to work in the snippet or the <a href="https://jsfiddle.net/ChippeRock/wt1gb9of/1/" rel="nofollow noreferrer">fiddle</a> although it does work in my browser when I create an HTML file. Please note the timer is controlled by the <code>counter</code> variable. My code is below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(document).keypress(function(e) {
      if (e.charCode === 65 || 103) {
        $('#PopUp').css("visibility", "visible");
        $('#PopUp').css("opacity", 1);
      }
    });
    
    $(function() {
      $('#PopUp').css("visibility", "visible");
      $('#PopUp').css("opacity", 1);
    });
  
    $(".close").click(function() {
      $('#PopUp').css("visibility", "hidden");
      $('#PopUp').css("opacity", 0);
    });
  });
  
  function printDiv() {
    var content = document.getElementById('content').innerHTML;
    var win = window.open();
    win.document.write(content);
    win.print(); // JavaScript Print Function
    win.close(); //It will close window after Print.
  }
  
  // initialization
  var counter = 60;
  var timesVisited = 0;
  var cookieExpirationDays = 7; // don't expire cookies for a week
  // test to see if localstorage/sessionStorage is available (localStorage has no expiration date)
  
  if (typeof(Storage) !== "undefined") {
    counter = 60;
    timesVisited = localStorage.getItem("timesVisited");
    // first time
    if ((timesVisited == 0) || (timesVisited &lt; 1)) {
      timesVisited = 1;
      localStorage.setItem("timesVisited", timesVisited);
      counter = 60;
    }
    // second time
    else if ((timesVisited &gt;= 1) &amp;&amp; (timesVisited &lt;= 3)) {
      timesVisited++;
      localStorage.setItem("timesVisited", timesVisited);
      counter = 45;
    }
    // third time
    else if ((timesVisited &gt;= 4) &amp;&amp; (timesVisited &lt;= 8)) {
      timesVisited++;
      localStorage.setItem("timesVisited", timesVisited);
      counter = 30;
    }
    // fourth time
    else if ((timesVisited &gt;= 9) &amp;&amp; (timesVisited &lt;= 13)) {
      timesVisited++;
      localStorage.setItem("timesVisited", timesVisited);
      counter = 15;
    }
    // fifth time
    else if (timesVisited &gt;= 14) {
      timesVisited++;
      localStorage.setItem("timesVisited", timesVisited);
      counter = 5;
    }
  }
  // No localstorage/sessionStorage. Use cookies 
  else {
    timesVisited = getCookie("timesVisited");
    console.log(timesVisited);
    // first time
    if ((timesVisited == "") || (timesVisited &lt; 1)) {
      timesVisited = 1;
      setCookie("timesVisited", timesVisited, cookieExpirationDays);
      counter = 60;
    }
    // second time
    else if ((timesVisited &gt;= 1) &amp;&amp; (timesVisited &lt;= 3)) {
      timesVisited++;
      setCookie("timesVisited", timesVisited, cookieExpirationDays);
      counter = 45;
    }
    // third time
    else if ((timesVisited &gt;= 4) &amp;&amp; (timesVisited &lt;= 8)) {
      timesVisited++;
      setCookie("timesVisited", timesVisited, cookieExpirationDays);
      counter = 30;
    }
    // fourth time
    else if ((timesVisited &gt;= 9) &amp;&amp; (timesVisited &lt;= 13)) {
      timesVisited++;
      setCookie("timesVisited", timesVisited, cookieExpirationDays);
      counter = 15;
    }
    // fifth time
    else if (timesVisited &gt;= 14) {
      timesVisited++;
      setCookie("timesVisited", timesVisited, cookieExpirationDays);
      counter = 5;
    }
  }
  var setMsg = setInterval(function() {
    counter--;
    if (counter &gt;= 60 &amp;&amp; counter &gt;= 70) {
      $("#close-message").html("1:" + (counter - 60));
    } else if (counter &gt;= 60 &amp;&amp; counter &lt; 70) {
      $("#close-message").html("1:0" + (counter - 60));
    } else if (counter &gt;= 10) {
      $("#close-message").html("0:" + counter);
    } else if (counter &gt; 0) {
      $("#close-message").html("0:0" + counter);
    } else {
      $(".close").click(function() {
        $('#PopUp').css("visibility", "hidden");
        $('#PopUp').css("opacity", 0);
      });
      $("#timer").remove();
      clearInterval(setMsg);
    }
  }, 1000);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.t {
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    -webkit-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -ms-transform: scale(0.25);
    z-index: 2;
    position: absolute;
    white-space: pre;
    overflow: visible;
  }
  
  #t1_1 {
    left: 256px;
    top: 35px;
    letter-spacing: 0.1px;
  }
  
  #t2_1 {
    left: 334px;
    top: 87px;
    word-spacing: -0.1px;
  }
  
  #t3_1 {
    left: 210px;
    top: 123px;
  }
  
  #t4_1 {
    left: 238px;
    top: 123px;
    word-spacing: -0.3px;
  }
  
  #t5_1 {
    left: 210px;
    top: 141px;
  }
  
  #t6_1 {
    left: 210px;
    top: 160px;
  }
  
  #t7_1 {
    left: 210px;
    top: 179px;
  }
  
  #t8_1 {
    left: 238px;
    top: 141px;
    letter-spacing: -0.1px;
    word-spacing: -0.1px;
  }
  
  #t9_1 {
    left: 238px;
    top: 160px;
    word-spacing: -0.1px;
  }
  
  #ta_1 {
    left: 238px;
    top: 179px;
    word-spacing: -0.1px;
  }
  
  #tb_1 {
    left: 343px;
    top: 242px;
    letter-spacing: -0.1px;
  }
  
  #tc_1 {
    left: 210px;
    top: 278px;
  }
  
  #td_1 {
    left: 210px;
    top: 297px;
  }
  
  #te_1 {
    left: 210px;
    top: 315px;
  }
  
  #tf_1 {
    left: 210px;
    top: 334px;
  }
  
  #tg_1 {
    left: 238px;
    top: 278px;
    word-spacing: -0.1px;
  }
  
  #th_1 {
    left: 238px;
    top: 297px;
    word-spacing: -0.1px;
  }
  
  #ti_1 {
    left: 238px;
    top: 315px;
    word-spacing: -0.2px;
  }
  
  #tj_1 {
    left: 238px;
    top: 334px;
    word-spacing: -0.1px;
  }
  
  #tk_1 {
    left: 286px;
    top: 393px;
    word-spacing: -0.1px;
  }
  
  #tl_1 {
    left: 210px;
    top: 429px;
  }
  
  #tm_1 {
    left: 210px;
    top: 448px;
  }
  
  #tn_1 {
    left: 210px;
    top: 466px;
  }
  
  #to_1 {
    left: 210px;
    top: 485px;
  }
  
  #tp_1 {
    left: 238px;
    top: 429px;
    word-spacing: -0.3px;
  }
  
  #tq_1 {
    left: 238px;
    top: 448px;
    word-spacing: -0.1px;
  }
  
  #tr_1 {
    left: 238px;
    top: 466px;
    word-spacing: -0.1px;
  }
  
  #ts_1 {
    left: 238px;
    top: 485px;
    word-spacing: -0.2px;
  }
  
  #tt_1 {
    left: 326px;
    top: 544px;
    letter-spacing: -0.1px;
  }
  
  #tu_1 {
    left: 210px;
    top: 580px;
  }
  
  #tv_1 {
    left: 210px;
    top: 599px;
  }
  
  #tw_1 {
    left: 210px;
    top: 618px;
  }
  
  #tx_1 {
    left: 238px;
    top: 618px;
  }
  
  #ty_1 {
    left: 210px;
    top: 636px;
  }
  
  #tz_1 {
    left: 238px;
    top: 636px;
  }
  
  #t10_1 {
    left: 210px;
    top: 655px;
  }
  
  #t11_1 {
    left: 238px;
    top: 580px;
    word-spacing: -0.1px;
  }
  
  #t12_1 {
    left: 238px;
    top: 599px;
    word-spacing: -0.2px;
  }
  
  #t13_1 {
    left: 238px;
    top: 655px;
    word-spacing: -0.1px;
  }
  
  #t14_1 {
    left: 264px;
    top: 716px;
    word-spacing: -0.2px;
  }
  
  #t15_1 {
    left: 210px;
    top: 752px;
  }
  
  #t16_1 {
    left: 210px;
    top: 771px;
  }
  
  #t17_1 {
    left: 210px;
    top: 789px;
  }
  
  #t18_1 {
    left: 210px;
    top: 808px;
  }
  
  #t19_1 {
    left: 238px;
    top: 752px;
    word-spacing: -0.1px;
  }
  
  #t1a_1 {
    left: 238px;
    top: 771px;
    word-spacing: -0.1px;
  }
  
  #t1b_1 {
    left: 238px;
    top: 789px;
    word-spacing: -0.2px;
  }
  
  #t1c_1 {
    left: 238px;
    top: 808px;
    word-spacing: -0.1px;
  }
  
  .s1_1 {
    FONT-SIZE: 85.4px;
    FONT-FAMILY: Arial;
    color: rgb(0, 0, 0);
    FONT-WEIGHT: bold;
  }
  
  .s2_1 {
    FONT-SIZE: 61.2px;
    FONT-FAMILY: Arial;
    color: rgb(0, 0, 0);
    FONT-WEIGHT: bold;
  }
  
  .s3_1 {
    FONT-SIZE: 61.2px;
    FONT-FAMILY: SymbolMT_1z5;
    color: rgb(0, 0, 0);
  }
  
  .s4_1 {
    FONT-SIZE: 61.2px;
    FONT-FAMILY: Arial;
    color: rgb(0, 0, 0);
  }
  
  div {
    padding-top: 10px;
  }
  
  .button {
    font-size: 1em;
    padding: 10px;
    color: #fff;
    border: 2px solid orange;
    border-radius: 20px/50px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
  }
  
  .button:hover {
    background: orange;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: visible;
    opacity: 1;
    height: 578%;
    width: 117.5%;
  }
  
  .overlay:target {
    visibility: hidden;
    opacity: 0;
    display: none;
  }
  
  .PopUp {
    margin: 50px auto;
    padding: 0px;
    background: #fff;
    border-radius: 5px;
    width: 60%;
    position: relative;
    transition: all 5s ease-in-out;
  }
  
  .PopUp .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
  }
  
  .PopUp .close:hover {
    color: orange;
  }
  
  .PopUp .content {
    max-height: 117.5%;
    overflow: auto;
  }
  
  .pdf1 {
    width: 935px;
    height: 1210px;
    background-color: white;
    -moz-transform: scale(1);
    z-index: 0;
    border: none;
  }
  
  button {
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    color: #2D2D2D;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
  }
  
  .Print {
    padding-bottom: 10px;
    margin-top: -5px;
  }
  
  .close-message {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    color: black;
    font-size: 0.9rem;
    line-height: 1;
    position: absolute;
    top: 15px;
    left: 9px;
  }
  
  .timer {
    position: absolute;
    top: 5px;
    right: 20px;
    z-index: 2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="PopUp" class="overlay"&gt;
    &lt;div class="PopUp"&gt;
      &lt;div class="timer" id="timer"&gt;&lt;img src="http://i.imgur.com/87XaOWA.png"&gt;
        &lt;p class="close-message" id="close-message"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;a class="close" href="#"&gt;&amp;#10005;&lt;/a&gt;
      &lt;div class="content"&gt;
        &lt;div id="p1" class="p1" style="overflow: hidden; position: relative; width: 885px; height: 878px;"&gt;
          &lt;!-- Begin page background --&gt;
          &lt;div id="pg1Overlay" style="width:100%; height:100%; position:absolute; z-index:1; background-color:rgba(0,0,0,0); -webkit-user-select: none;"&gt;&lt;/div&gt;
          &lt;div id="pg1" class="pg1" style="-webkit-user-select: none;"&gt;&lt;img src="http://i.imgur.com/vcY42CW.png" id="pdf1" class="pdf1"&gt;&lt;/img&gt;
          &lt;/div&gt;
          &lt;!-- End page background --&gt;
  
          &lt;!-- Begin text definitions (Positioned/styled in CSS) --&gt;
          &lt;div id="t1_1" class="t s1_1"&gt;Player Selection Criteria Evaluator Cue Card&lt;/div&gt;
          &lt;div id="t2_1" class="t s2_1"&gt;Skating – speed, quickness, technique&lt;/div&gt;
          &lt;div id="t3_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="t4_1" class="t s4_1"&gt;Forward and Backward&lt;/div&gt;
          &lt;div id="t5_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="t6_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="t7_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="t8_1" class="t s4_1"&gt;Turn both directions&lt;/div&gt;
          &lt;div id="t9_1" class="t s4_1"&gt;Stop both directions&lt;/div&gt;
          &lt;div id="ta_1" class="t s4_1"&gt;Are they in a good position for stability and strength&lt;/div&gt;
          &lt;div id="tb_1" class="t s2_1"&gt;Passing – technique, control, vision&lt;/div&gt;
          &lt;div id="tc_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="td_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="te_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="tf_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="tg_1" class="t s4_1"&gt;Forehand and Backhand&lt;/div&gt;
          &lt;div id="th_1" class="t s4_1"&gt;To moving and stationary target&lt;/div&gt;
          &lt;div id="ti_1" class="t s4_1"&gt;Vision – do they take a look and select best option&lt;/div&gt;
          &lt;div id="tj_1" class="t s4_1"&gt;Advanced – board passes, chips, saucer passes&lt;/div&gt;
          &lt;div id="tk_1" class="t s2_1"&gt;Puck Control – technique, open ice, confined space&lt;/div&gt;
          &lt;div id="tl_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="tm_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="tn_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="to_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="tp_1" class="t s4_1"&gt;Open carry with speed&lt;/div&gt;
          &lt;div id="tq_1" class="t s4_1"&gt;Execute dekes and fakes on the 1 on 1&lt;/div&gt;
          &lt;div id="tr_1" class="t s4_1"&gt;Can they handle the puck in traffic and tight space&lt;/div&gt;
          &lt;div id="ts_1" class="t s4_1"&gt;Ability to maintain control while being stick checked&lt;/div&gt;
          &lt;div id="tt_1" class="t s2_1"&gt;Shooting – technique, accuracy, velocity&lt;/div&gt;
          &lt;div id="tu_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="tv_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="tw_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="tx_1" class="t s4_1"&gt;Velocity&lt;/div&gt;
          &lt;div id="ty_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="tz_1" class="t s4_1"&gt;Accuracy&lt;/div&gt;
          &lt;div id="t10_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="t11_1" class="t s4_1"&gt;Forehand and backhand&lt;/div&gt;
          &lt;div id="t12_1" class="t s4_1"&gt;Wrist shot, snap shot, slap shot&lt;/div&gt;
          &lt;div id="t13_1" class="t s4_1"&gt;Shot Selection – do they select the best shot for the opportunity?&lt;/div&gt;
          &lt;div id="t14_1" class="t s2_1"&gt;Game Understanding – Principles of Offence and Defence&lt;/div&gt;
          &lt;div id="t15_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="t16_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="t17_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="t18_1" class="t s3_1"&gt;♦&lt;/div&gt;
          &lt;div id="t19_1" class="t s4_1"&gt;Player understands positional play&lt;/div&gt;
          &lt;div id="t1a_1" class="t s4_1"&gt;Player supports the puck on the defensive and offensive side of puck&lt;/div&gt;
          &lt;div id="t1b_1" class="t s4_1"&gt;Player communicates with teammates&lt;/div&gt;
          &lt;div id="t1c_1" class="t s4_1"&gt;Player has the ability to read and react.&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="Print" class="Print" align="center"&gt;
        &lt;button onclick="printDiv()"&gt;&lt;img src="http://i.imgur.com/HcXNoMC.png" /&gt;&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>