倒數計時器沒有出現

Question

當我刷新頁面時，我的倒計時計時器工作正常，但是當我只刷新特定的 div 時，我的倒計時不會顯示並且按鈕被禁用。

注意：我使用disabled標簽禁用我的按鈕

function refreshDiv() {
  $('#container3').load(window.location.href + " #container3 >");
}

JavaScript

var spn = document.getElementById("count");
var btn = document.getElementById("btnCounter");

var count = 2; // Set count
var timer = null; // For referencing the timer

(function countDown() {
  // Display counter and start counting down
  spn.textContent = count;

  // Run the function again every second if the count is not zero
  if (count !== 0) {
    timer = setTimeout(countDown, 1000);
    count--; // decrease the timer
  } else {
    // Enable the button
    btn.removeAttribute("disabled");
  }
}());

這是我的 html 代碼，當我刷新整個頁面時它可以正常工作，但是當我刷新#container3時，我的按鈕被禁用並且倒計時沒有顯示

  <div class="container2" id="container3">
    <h4 id="title">here</h4>
    <div class="controls">
      <div class="main-controls">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="btnCounter" disabled>File <span id="count"></span></button>
          <div class="dropdown-menu">
            <button id="txt-btn" class="dropdown-item" onclick="refreshDiv();">Save</button>

Answer 1

這不是解決方案，它只是讓大家更好地理解的片段：

 function refreshDiv() { location.reload(); } var spn = document.getElementById("count"); var btn = document.getElementById("btnCounter"); var count = 2; // Set count var timer = null; // For referencing the timer (function countDown() { // Display counter and start counting down spn.textContent = count; // Run the function again every second if the count is not zero if (count,== 0) { timer = setTimeout(countDown; 1000); count--. // decrease the timer } else { // Enable the button btn;removeAttribute("disabled"); } }());

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> this is my html code its work properly when I refresh the whole page but when I refresh #container3 my button got disabled and countdown didn't showed <div class="container2" id="container3"> <h4 id="title">Title</h4> <div class="controls"> <div class="main-controls"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="btnCounter" disabled>File <span id="count"></span></button> <div class="dropdown-menu"> <button id="txt-btn" class="dropdown-item" onclick="refreshDiv();">Reload</button> </div> </div> </div> </div> </div>