Jquery Pomodoro Clock - 变量不会更新

Question

我意识到还有另外一个类似的问题same problem。但是，答案只是没有使用我自己的代码，所以我不得不再问一次。我想要这些变量＆＃34; initial＆＃34;和＆＃34;计数＆＃34;根据pomoLength的新值更新，但发现无法解决它。这是我codepen

的链接

HTML

<div>
  <span id="timer"></span>
  <div id="pomoLength">
    <button class="btn minus"> - </button>
    <span class="display"> 25 </span>
    <button class="btn plus"> + </button>
  </div>
</div>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="reset">reset</button>

JQUERY

$(document).ready(function() {
  var pomoLength = 25;
  var initial = pomoLength * 60;
  var breakLength = 5;
  var count = initial;
  var counter;

  $('.plus').click(function() {
    pomoLength++;
    $('.display').text(pomoLength);
  });
  $(".minus").click(function() {
    if (pomoLength == 0) return;
    pomoLength--;
    $('.display').text(pomoLength);
  });

  function timer() {
    if (count <= 0) {
      clearInterval(counter);
      return;
    }
    count--;
    displayCount(count);
  }

  function displayCount(count) {
    var hours = Math.floor(count / 3600);
    var minutes = Math.floor(count % 3600 / 60);
    var seconds = count % 60;

    // Format times to show double digits
    if (hours < 1) {
      hours = hours.toString();
      hours = "";
    } else if (hours < 10) {
      hours = "0" + hours.toString() + " hours ";
    };
    document.getElementById("timer").innerHTML = hours + minutes.toString() + " minutes " +
      seconds.toString() + " secs";
  }

  $('#start').on('click', function() {
    counter = setInterval(timer, 1000);
  });
  $('#stop').on('click', function() {
    clearInterval(counter);
  });
  $('#reset').on('click', function() {
    clearInterval(counter);
    displayCount(initial);
  });

  displayCount(initial);
});