Tracking How Many Times a Button has been Clicked

Question

I have a popup which automatically loads when the page is loaded, it also 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'.

My focus is on the 'Print' button. Currently when I click the 'Print' button it adds the following bit of code:

$("#timer").remove();
clearInterval(setMsg);

However if you were to reload the page the timer would reappear as if the button hadn't been clicked at all, it would be either 5, 15, 30, 45 or 60 seconds depending on how many times you had previously viewed the page. I would like the timer to permanently be removed after the 'Print' button has been clicked.

Please note the timer does not appear to work in the snippet or the fiddle as I believe several of the functions are prevented from working such as document.write. However it will work in my browser when I create an HTML file. My code is below:

$(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);
  });
});

// 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 < 1)) {
    timesVisited = 1;
    localStorage.setItem("timesVisited", timesVisited);
    counter = 60;
  }
  // second time
  else if ((timesVisited >= 1) && (timesVisited <= 3)) {
    timesVisited++;
    localStorage.setItem("timesVisited", timesVisited);
    counter = 45;
  }
  // third time
  else if ((timesVisited >= 4) && (timesVisited <= 8)) {
    timesVisited++;
    localStorage.setItem("timesVisited", timesVisited);
    counter = 30;
  }
  // fourth time
  else if ((timesVisited >= 9) && (timesVisited <= 13)) {
    timesVisited++;
    localStorage.setItem("timesVisited", timesVisited);
    counter = 15;
  }
  // fifth time
  else if (timesVisited >= 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 < 1)) {
    timesVisited = 1;
    setCookie("timesVisited", timesVisited, cookieExpirationDays);
    counter = 60;
  }
  // second time
  else if ((timesVisited >= 1) && (timesVisited <= 3)) {
    timesVisited++;
    setCookie("timesVisited", timesVisited, cookieExpirationDays);
    counter = 45;
  }
  // third time
  else if ((timesVisited >= 4) && (timesVisited <= 8)) {
    timesVisited++;
    setCookie("timesVisited", timesVisited, cookieExpirationDays);
    counter = 30;
  }
  // fourth time
  else if ((timesVisited >= 9) && (timesVisited <= 13)) {
    timesVisited++;
    setCookie("timesVisited", timesVisited, cookieExpirationDays);
    counter = 15;
  }
  // fifth time
  else if (timesVisited >= 14) {
    timesVisited++;
    setCookie("timesVisited", timesVisited, cookieExpirationDays);
    counter = 5;
  }
}
var setMsg = setInterval(function() {
  counter--;
  if (counter >= 60 && counter >= 70) {
    $("#close-message").html("1:" + (counter - 60));
  } else if (counter >= 60 && counter < 70) {
    $("#close-message").html("1:0" + (counter - 60));
  } else if (counter >= 10) {
    $("#close-message").html("0:" + counter);
  } else if (counter > 0) {
    $("#close-message").html("0:0" + counter);
  } else {
    $(".close").click(function() {
      $('#PopUp').css("visibility", "hidden");
      $('#PopUp').css("opacity", 0);
    });
    $("#timer").remove();
    clearInterval(setMsg);
  }
}, 1000);
});

        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.
        $( ".close" ).click(function() {
          $('#PopUp').css("visibility", "hidden"); 
          $('#PopUp').css("opacity", 0);
        });
        $("#timer").remove();
 	       clearInterval(setMsg);s
        }

.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;
}



  
    
      
    
    ✕
    
      
        
        
        
        
        

        
        Player Selection Criteria Evaluator Cue Card
        Skating – speed, quickness, technique
        ♦
        Forward and Backward
        ♦
        ♦
        ♦
        Turn both directions
        Stop both directions
        Are they in a good position for stability and strength
        Passing – technique, control, vision
        ♦
        ♦
        ♦
        ♦
        Forehand and Backhand
        To moving and stationary target
        Vision – do they take a look and select best option
        Advanced – board passes, chips, saucer passes
        Puck Control – technique, open ice, confined space
        ♦
        ♦
        ♦
        ♦
        Open carry with speed
        Execute dekes and fakes on the 1 on 1
        Can they handle the puck in traffic and tight space
        Ability to maintain control while being stick checked
        Shooting – technique, accuracy, velocity
        ♦
        ♦
        ♦
        Velocity
        ♦
        Accuracy
        ♦
        Forehand and backhand
        Wrist shot, snap shot, slap shot
        Shot Selection – do they select the best shot for the opportunity?
        Game Understanding – Principles of Offence and Defence
        ♦
        ♦
        ♦
        ♦
        Player understands positional play
        Player supports the puck on the defensive and offensive side of puck
        Player communicates with teammates
        Player has the ability to read and react.

Tracking How Many Times a Button has been Clicked

Answers (1)

Related Questions