CODEWITHSUNDEEP
javascriptjquery
Moji
Moji

Reputation: 1830

Jquery counter shows zero after reset

I am using JQuery to set up a counter from 60 and it is working great. except when it counts down the first round and reaches zero, when I reset it, it first shows zero and the starts from 60 again. I want it to immediately start from 60 after resetting.any ideas? here is my code(it is a sample code that gives the same result as my original code)

    $("#Resend-confirm-phone-number-code").hide();
    var count = 60,
        timer = setInterval(function () {
            $("#counter").html(--count);
            if (count == 0) {
                clearInterval(timer);
                $("#resend").fadeOut("fast", function () { });
                $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
            }
        },
            1000);
    $("#resend").show();
    function aliAsghar() {
        $("#Resend-confirm-phone-number-code").hide();
        var count = 60,
            timer = setInterval(function () {
                $("#counter").html(--count);
                if (count == 0) {
                    clearInterval(timer);
                    $("#resend").fadeOut("fast", function () { });
                    $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
                }
            },
                1000);
        $("#resend").show();
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newRegister-addCode" id="confirmPhoneNumberForm-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="newRegister-helpText">
            <p>
                enter the code
            </p>
        </div>
        <form class="newRegister-formBox" method="Post" id="confirmPhoneNumberForm" autocomplete="off">
            <div class="formElement newRegister-input">
                <i class="fa fa-key"></i>
                <input autocomplete="off" type="text" name="code" id="code" class="form-control persianDigitInput"
                    placeholder="enter the code">
                <div class="newRegister-alarmText">
                    
                    <p id="resend"> seconds left<span id="counter" >60</span></p>  
                    
                    <button class="animateBtn" type="button" id="Resend-confirm-phone-number-code" style="Display:none; " onclick="aliAsghar()">
                        <i class="fa fa-refresh"></i>
                        send again
                    </button>
    
                </div>
            </div>
            <div class="newRegister-button">
                <button type="button" id="send-confirm-phone-number-code" class="animateBtn" >
                    <i class="fa fa-check"></i>
                    submit
                </button>
            </div>
        </form>
    </div>

Upvotes: 1

Views: 336

Answers (2)

Shinjo
Shinjo

Reputation: 695

Simply set: $('#counter').text( "60" );

$("#Resend-confirm-phone-number-code").hide();
$('#counter').text( "60" );
var count = 60,
    timer = setInterval(function () {
        $("#counter").html(--count);
        if (count == 0) {
            clearInterval(timer);
            $("#resend").fadeOut("fast", function () { });
            $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
        }
    },
        1000);
$("#resend").show();
function aliAsghar() {
    $("#Resend-confirm-phone-number-code").hide();
    $('#counter').text( "60" );
    var count = 60,
        timer = setInterval(function () {
            $("#counter").html(--count);
            if (count == 0) {
                clearInterval(timer);
                $("#resend").fadeOut("fast", function () { });
                $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
            }
        },
            1000);
    $("#resend").show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newRegister-addCode" id="confirmPhoneNumberForm-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="newRegister-helpText">
        <p>
            enter the code
        </p>
    </div>
    <form class="newRegister-formBox" method="Post" id="confirmPhoneNumberForm" autocomplete="off">
        <div class="formElement newRegister-input">
            <i class="fa fa-key"></i>
            <input autocomplete="off" type="text" name="code" id="code" class="form-control persianDigitInput"
                placeholder="enter the code">
            <div class="newRegister-alarmText">

                <p id="resend"> seconds left<span id="counter" ></span></p>  

                <button class="animateBtn" type="button" id="Resend-confirm-phone-number-code" style="Display:none; " onclick="aliAsghar()">
                    <i class="fa fa-refresh"></i>
                    send again
                </button>

            </div>
        </div>
        <div class="newRegister-button">
            <button type="button" id="send-confirm-phone-number-code" class="animateBtn" >
                <i class="fa fa-check"></i>
                submit
            </button>
        </div>
    </form>
</div>

To simplify your code you can just call the function:

/*$("#Resend-confirm-phone-number-code").hide();
$('#counter').text( "60" );
var count = 60,
    timer = setInterval(function () {
        $("#counter").html(--count);
        if (count == 0) {
            clearInterval(timer);
            $("#resend").fadeOut("fast", function () { });
            $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
        }
    },
        1000);
$("#resend").show();*/
aliAsghar();
function aliAsghar() {
    $("#Resend-confirm-phone-number-code").hide();
    $('#counter').text( "60" );
    var count = 60,
        timer = setInterval(function () {
            $("#counter").html(--count);
            if (count == 0) {
                clearInterval(timer);
                $("#resend").fadeOut("fast", function () { });
                $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
            }
        },
            1000);
    $("#resend").show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newRegister-addCode" id="confirmPhoneNumberForm-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="newRegister-helpText">
        <p>
            enter the code
        </p>
    </div>
    <form class="newRegister-formBox" method="Post" id="confirmPhoneNumberForm" autocomplete="off">
        <div class="formElement newRegister-input">
            <i class="fa fa-key"></i>
            <input autocomplete="off" type="text" name="code" id="code" class="form-control persianDigitInput"
                placeholder="enter the code">
            <div class="newRegister-alarmText">

                <p id="resend"> seconds left<span id="counter" ></span></p>  

                <button class="animateBtn" type="button" id="Resend-confirm-phone-number-code" style="Display:none; " onclick="aliAsghar()">
                    <i class="fa fa-refresh"></i>
                    send again
                </button>

            </div>
        </div>
        <div class="newRegister-button">
            <button type="button" id="send-confirm-phone-number-code" class="animateBtn" >
                <i class="fa fa-check"></i>
                submit
            </button>
        </div>
    </form>
</div>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337590

You can fix the issue by immediately updating the HTML of the element with the count value when the function is first called, and before the first iteration of the interval has happened.

You can then DRY up the logic by simply calling aliAsghar() when the page loads, instead of having the same logic copied in to the page twice.

Note the use of an unobtrusive event handler over on* event attributes in the HTML which should be avoided where possible, and also the removal of the empty callback functions on the fadeX() calls, which are not mandatory.

function aliAsghar() {
  $("#Resend-confirm-phone-number-code").hide();
  var count = 5; // set to 5 just to speed up testing
  $("#counter").html(count);

  var timer = setInterval(function() {
    $("#counter").html(--count);
    if (count == 0) {
      clearInterval(timer);
      $("#resend").fadeOut("fast");
      $("#Resend-confirm-phone-number-code").fadeIn("fast");
    }
  }, 1000);
  $("#resend").show();
}

aliAsghar(); // onload
$('#Resend-confirm-phone-number-code').click(function() {
  aliAsghar();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newRegister-addCode" id="confirmPhoneNumberForm-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="newRegister-helpText">
    <p>
      enter the code
    </p>
  </div>
  <form class="newRegister-formBox" method="Post" id="confirmPhoneNumberForm" autocomplete="off">
    <div class="formElement newRegister-input">
      <i class="fa fa-key"></i>
      <input autocomplete="off" type="text" name="code" id="code" class="form-control persianDigitInput" placeholder="enter the code">
      <div class="newRegister-alarmText">
        <p id="resend"> seconds left<span id="counter">60</span></p>
        <button class="animateBtn" type="button" id="Resend-confirm-phone-number-code" style="Display:none;">
          <i class="fa fa-refresh"></i>
          send again
        </button>
      </div>
    </div>
    <div class="newRegister-button">
      <button type="button" id="send-confirm-phone-number-code" class="animateBtn">
        <i class="fa fa-check"></i>
        submit
      </button>
    </div>
  </form>
</div>

Upvotes: 1

Related Questions