0

I want to start counter when I click the button first time and stop when I click on second time.

I tried the following code:

var myTimer;

function clock(){
    myTimer = setInterval(myClock,1000);
    var c = 0;
    function myClock(){
        document.getElementById('demo').innerHTML = ++c;    
    }
}    
<h1>---Counter----</h1>
<p id="demo"></p>
<button onclick="clock();clearInterval(myTimer);">start</button>

I want to start the counter after the initial click of button and stop it in the second click.

Always Helping
  • 14,316
  • 4
  • 13
  • 29
ashil
  • 99
  • 11

2 Answers2

3

I add an eventlistener to the button. If clicked I check if the button contains class start. If not (that's the initial) add this class, set textContent to "stop" and start the clock. Otherwise remove this class set textContent on "start" and clearInterval. Note: For clearing the interval you need to store the return of setInterval in a variable with access at clearing, so I declared it at start global.
If you press button after stop again timer will restart at beginning.

let btn = document.getElementById('btn');
var myTimer;

btn.addEventListener('click', function() {
    if (btn.classList.contains('start')) {
        btn.classList.remove('start');
        btn.textContent = "start";
        clearInterval(myTimer);
    } else {
        btn.classList.add('start');
        btn.textContent = "stop";
        clock();
    }
});

function clock(){
    function myClock(){
        document.getElementById('demo').textContent = ++c;
    }
    myTimer = setInterval(myClock,1000);
    var c = 0;
}
<h1>---Counter----</h1>
<p id="demo"></p>
<button id="btn">start</button>
Sascha
  • 4,576
  • 3
  • 13
  • 34
2

You can set a flag to check if timer has started with true or false.

If the timer is started change the innerText to stop and and use the same button to start the timer again.

Live Demo:

var myTimer;

//Check if started ot not
var started = false

//Timer
var timer = 0;

//Btn text
var btn = document.getElementById("startBtn")

function clock(e) {
  if (!started) {
    myTimer = setInterval(myClock, 1000);
    started = true
    btn.innerText = 'Stop'
  } else {
    started = false
    clearInterval(myTimer);
    btn.innerText = 'Start'
  }
}

function myClock() {
  if (started) {
    ++timer
    document.getElementById('demo').textContent = timer;
  }
}
<h1>---Counter----</h1>
<p id="demo"></p>
<button id="startBtn" onclick="clock(this)">start</button>
Always Helping
  • 14,316
  • 4
  • 13
  • 29
  • It worked. Is it possible to change it to start as stopwatch. – ashil Aug 08 '20 at 09:57
  • @ashil i am not sure what you mean ? Can you please clarify - It is showing start and stop already which acts like stop watch. – Always Helping Aug 08 '20 at 10:00
  • Like instead of starting a counter and loop through number. Loop through time.Like a stop watch – ashil Aug 08 '20 at 10:03
  • 1
    @ashil Ahh i see what you mean. Yes its possible but that's a totally seperate question to be honest. There will alot things we need to add (Date, time, intervals) etc etc. This [question](https://stackoverflow.com/questions/41709953/creating-a-stopwatch-from-scratch-in-javascript) or this [question](https://stackoverflow.com/questions/20318822/how-to-create-a-stopwatch-using-javascript) will guide you regarding stopwatch. Happy coding :) – Always Helping Aug 08 '20 at 10:11
  • I found a solution. Var minutes = Math.floor(timer/60);var seconds = timer - minutes*60; changing timer to minues and seconds variable in the textContent solved my issue . – ashil Aug 08 '20 at 10:17
  • @ashil Glad to hear that. Happy coding Ashil. Thank you. – Always Helping Aug 08 '20 at 10:17