Modify page text after flipclock.js countdown timer stops

Question

I'm currently using flipclock.js as a countdown timer. I want to modify the text of the webpage after the countdown has stopped. I'm using the onStop parameter to try to do this, but can't seem to get any of the lines to work.

<head>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet">
</head>
<script>
  var clock = $('.clock').FlipClock(2, {
    countdown: true,
    minimumDigits: 2,
    onStop: function() {
      alert("Test!");
      $('.message').html('The clock has stopped!');
      $('.message').text('The clock has stopped!')
    }
  });
</script>

<div class="clock"></div>

Any thoughts?

Put your jQuery code in a document.ready handler. Right now it's executing before the elements exist in the DOM: https://jsfiddle.net/RoryMcCrossan/cax4k7d3/ — Rory McCrossan, Jan 17 '20 at 17:30
It doesn't seem like the example you linked actually does anything? — Parseltongue, Jan 17 '20 at 17:36
@RoryMcCrossan I think his main problem was with not working onStop callback and your solution doesn't solve that. I was about to finish my snippet with an answer, but you already closed the question — JSEvgeny, Jan 17 '20 at 17:41
@Parseltongue here you go buddy https://jsfiddle.net/40re721m/2/ — JSEvgeny, Jan 17 '20 at 17:55
@Parseltongue I believe there is something wrong with the library itself or the documentation, it does not execute the onStop() callback function properly. The official document has another way to use call back function. Simply change `onStop: function(){}` to `callbacks: { stop: function() { } }` — Yunhai, Jan 17 '20 at 17:55
@JSEvgeny thanks, buddy! Works perfectly. Really appreciate it. — Parseltongue, Jan 17 '20 at 18:24
@RoryMcCrossan Please re-open this question as the linked answer doesn't resolve the problem I had. — Parseltongue, Jan 17 '20 at 18:29
True, it only resolved one if them. I've re opened it so @Yunhai can post the solution — Rory McCrossan, Jan 17 '20 at 18:54

JSEvgeny · Accepted Answer · 2020-01-17T20:39:26.943

Here is working snippet for you. The problem I guess is in FlipClock documentation

<html>
  <head>
    <script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css">
  </head>
    <body>
      <div class="clock"></div>
      <div class="message"></div>
    
      <script>
        var clock = $('.clock').FlipClock(2, {
          countdown: true,
          minimumDigits: 2,
            callbacks: {
            stop:function() {
              $('.message').html('The clock has stopped!');
            }
          }
        });
      </script> 
    </body>
</html>

Modify page text after flipclock.js countdown timer stops

1 Answers1