臂上的clearInterval不工作

  <div class="centre_screen" id="success_frame">
    <p class="white_text" id="success_text_1">Payment successful!</p>
    <button onclick="stop()">Stop</button>
    <img src="img/tick.png" id="tick_img" />
    <p class="white_text" id="success_text_2">Your locker will now power on</p>
    <br>
    <p class="white_text" id="success_text_3">Thank you for using Locker services</p>
    <progress value="0" max="10" id="progressBar"></progress>
  </div>

  <script>

    var interval = setInterval(prog_bar,2000);

    function prog_bar()
    {
      console.log(String(interval));
      return;
    }

    function stop()
    {
      console.log("STOP: " + String(interval));
      clearInterval(interval);

    }