how do I refresh specific div with countdown-CodePudding

I have countdown in my .container2 div but when I tried to reload that specific container its reload perfectly but my countdown didn't showed up and also button got disabled..

<div id="container2">
        <h4 id="title">Type Data 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 
                        </button>
                    </div>
                </div>

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

       var count = 3; // 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() {
               $('#container2').load(window.location.href   " #container2");
                }

CodePudding user response：

You call countDown() function only init time that's the issue. on button click call again countDown() function !

Try this code it's help you

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

    var count = 3; // 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");
      }
    }

    countDown();

    function refreshDiv() {
      $('#container2').load(window.location.href   "#container2");
      btn.setAttribute("disabled", true);
      count = 3;
      countDown();
    }

CodePudding user response：

what are you trying to do? is it something like this?
when reload button is pressed, reload div also function inside div? so countdown function execute again?
hope this help, and give you clue.

var spn = $("#count")
var btn = $("#btnCounter")
var myInterval
var count = 3 // Set count
var timer = null


// set interval without delay
function setIntervalImmediately(func, interval) {
    func();
    return setInterval(func, interval);
}



function countDown(sec){
        myInterval = setIntervalImmediately(function () {
            $('#count').text(sec--);
            if (sec == -1) {
                clearInterval(myInterval);
                    $('#count').text("");
                btn.removeAttr("disabled");
            }
            else{
                     btn.attr("disabled", "disabled")
            }
    }, 1000);
}

$(document).on("click", "#txt-btn", function(){
  clearInterval(myInterval);
    refreshDiv()
})

function refreshDiv(){
    $("#container2").load(location.href   " #container2");
  countDown(count)
}

$(document).ready(function(){
        countDown(count)
})

<div id="container2">
        <h4 id="title">Type Data here</h4>
        <div >
            <div >
                <div >
                    <button  data-bs-toggle="dropdown" id="btnCounter" disabled>
                        File <span id="count"></span>
                    </button>
                    <div >
                        <button id="txt-btn" >
                            Save? do u mean reload?
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>