Please help me write a small JavaScript code to increase the number in the input field

Question:

There is such a script

function timer() {
var seconds = 5;
var seconds_timer_id = setInterval(function() {
            if (seconds > 0) {
                seconds --;
                if (seconds < 10) {
                    seconds = "0" + seconds;
                }
                $(".videotime").text(seconds);
            } else {
                clearInterval(seconds_timer_id);
                $("#allcount").val((+$("#allcount").val() + 1));

            }
        }, 1000);

    }

which i run like this

<a href="index.php?id=test1" onclick="timer(); this.style.display='none';">Старт</a>

When the script is run for the first time, it increases the value in the input field by one, and when I try to run it a second time, nothing happens. Rather, the timer goes on but there is no increase.

The form in which the number should increase

function timer() {
  var seconds = 5;
  var seconds_timer_id = setInterval(function() {
    if (seconds > 0) {
      seconds --;
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      $(".videotime").text(seconds);
    } else {
      clearInterval(seconds_timer_id);
      $("#allcount").val((+$("#allcount").val() + 1));
    }
  }, 1000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="videotime">0</div>

<form id="formMain" name="formMain">
<input type="text" value="0" id="allcount" name="counttest"  />
</form>

<a href="#" onclick="timer(); this.style.display='none';">Смотреть видео</a><br>

<a href="#" onclick="timer(); this.style.display='none';">Смотреть видео</a><br>

<a href="#" onclick="timer(); this.style.display='none';">Смотреть видео</a><br>

<a href="#" onclick="timer(); this.style.display='none';">Смотреть видео</a><br>

<a href="#" onclick="timer(); this.style.display='none';">Смотреть видео</a><br>

<a href="#" onclick="timer(); this.style.display='none';">Смотреть видео</a><br>

Answer:

Hello, I have rewritten your code.

http://codepen.io/anon/pen/MbgxzL?editors=1111

I made 2 different timers, when the first one finishes its work, we delete it with the help of clearInterbal and start a new one, which already increases the input value by 1 each time

<!-- HTML -->
<div class="videotime">0</div>
<form id="formMain" name="formMain">
<input type="text" value="0" id="allcount" name="counttest"  />
</form>
<a href="#" class="seeVideo">Смотреть видео</a><br>

<!-- JS -->
$(document).on('ready', function(){

  var secAdvt = 6;
  var timeStart = 0;

  function timer(obj) {
    timeStart++;
    $("input[name=counttest]").val(timeStart);
  }

  function countdown(obj){
    secAdvt--;

    if(secAdvt == 0){
      clearInterval(startCountDown);
      startVideo = setInterval(function(){
        timer();
      }, 1000);
    }

    $(".videotime").text(secAdvt);
  }

  $(".seeVideo").on('click', function(){
    $(".videotime").text();
    startCountDown = setInterval(function(){
      countdown();
    }, 1000);
  });

});
Scroll to Top