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