countdown timer didn't show up-CodePudding

before after refreshing countdown didn't showed up and its goes disabled

when I refresh the page my countdown timer works perfectly, but when I refresh only particular div my countdown wont show up and button gets disabled.

note: I useed disabled tag to disabled my button

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");
  }
}());

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  id="container3">
    <h4 id="title">here</h4>
    <div >
        <div >
            <div >
                <button
                     
                    data-bs-toggle="dropdown"  id="btnCounter" disabled
                >
                    File <span id="count"></span>
                </button>
                <div >
                    
                    <button id="txt-btn"  
            onclick="refreshDiv();">
                        Save here
                    </button>

CodePudding user response：

I think this is the solution but I'm not sure I understand correctly what you're trying to do:

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");
  }
}());

function refreshDiv() {
  location.reload();
}

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  id="container3">
  <h4 id="title">Title</h4>
  <div >
    <div >
      <div >
        <button  data-bs-toggle="dropdown" id="btnCounter" disabled>
          File <span id="count"></span>
        </button>
        <div >
          <button id="txt-btn"  onclick="refreshDiv();">Save</button>
        </div>
      </div>
    </div>
  </div>
</div>