How to set timer duration in JavaScript?

Question

I have some problems with my timer. When changing the timer duration, I can't make the timer start from the new duration. How can I fix that? Please help. Here is my code:

CSS:

div {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid;
    text-align: center;
}

HTML:

<div class='session'>2</div>
<div id='increase' onclick='decrease()'>-</div>
<div id='increase' onclick='increase()'>+</div>
<div class='session' id='session' onclick='setInterval(changeSessionDuration,100)'>2</div>

JS:

var x = document.getElementsByClassName('session');
var seconds = 60;

function increase() {
    for (var i = 0; i < x.length; i++) {
        x[i].innerHTML++;
    }
}

function decrease() {
    for (var i = 0; i < x.length; i++) {
        if (x[i].innerHTML > 0) {
            x[i].innerHTML--;
        }
    }
}

var session = x[1].innerHTML - 1;

function changeSessionDuration() {
    if (seconds > 0) {
        seconds--;
        if (seconds == 0 && session > 0) {
            session--;
            seconds = 60;
        }
    }
    x[1].innerHTML = session + ':' + seconds;
}

Adrian · Accepted Answer · 2016-02-19 16:19:57Z

1

If I understand your problem correctly, your timer doesn't start at the correct time that you have added beforehand the timer was running?

If then, it's because of this line:

var session = x[1].innerHTML - 1;

The value of session is already set before you incremented/decremented the time.

You should set the value of session after the increments/decrements or before starting the run like:

<div class='session' id='session' onclick='setSession(); setInterval(changeSessionDuration,100);'>2</div>

and the JS would be:

var x = document.getElementsByClassName('session');
var seconds = 60;

function increase() {
    for (var i = 0; i < x.length; i++) {
        x[i].innerHTML++;
    }
}

function decrease() {
    for (var i = 0; i < x.length; i++) {
        if (x[i].innerHTML > 0) {
            x[i].innerHTML--;
        }
    }
}

var session;
function setSession(){
    session = x[1].innerHTML - 1;
}

function changeSessionDuration() {
    if (seconds > 0) {
        seconds--;
        if (seconds == 0 && session > 0) {
            session--;
            seconds = 60;
        }
    }
    x[1].innerHTML = session + ':' + seconds;
}

And my example codes are dirty, you should suit it to your flavor.

answered Feb 19, 2016 at 16:19

Adrian

1,58712 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Armine Over a year ago

Thank you man! You are genious! :D That is what I exactly want!

Adrian Over a year ago

No problem! And i'm not certainly a genious or genius :D

Armine Over a year ago

Let it be genius! :D

MysterX · Accepted Answer · 2016-02-19 15:51:12Z

0

This happens because you don't clear previously set interval. You need to create interval within javascript click event listener. Code below is working if you use just one place to print out seconds

var x=document.getElementsByClassName('session'),
    interval;

x[0].addEventListener('click', function(){
  if(interval){
    clearInterval(interval);
  }
  interval = setInterval(changeSessionDuration,100)
}, false); 

var seconds=60;

function increase(){
  for (var i=0;i<x.length;i++){
    x[i].innerHTML++;
  }
}

function decrease(){
  for (var i=0;i<x.length;i++){
    if(x[i].innerHTML>0){
        x[i].innerHTML--;
    }
  }
}

var session=x[0].innerHTML-1;

function changeSessionDuration(){
  if (seconds>0){
   seconds--;
  if(seconds==0 && session>0){
     session--;
     seconds=60;
  }
}
 x[0].innerHTML=session +':'+seconds;
}

edited Feb 19, 2016 at 15:51

answered Feb 19, 2016 at 15:46

MysterX

2,3781 gold badge14 silver badges12 bronze badges

2 Comments

Armine Over a year ago

Thank you for your help but your code doesn't help.It's all the same.

phenxd Over a year ago

No it's not? See the second code block, with clearInterval()

Collectives™ on Stack Overflow

How to set timer duration in JavaScript?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related