Modify page text after flipclock.js countdown timer stops

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?

Solution

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>