How to change pause to continue and vice-versa in a stopwatch built using javascript

Issue

let sec=0;
let minutes=0;
let hrs=0;

let displayHours=0;
let displaySeconds=0;
let displayMinutes=0;

let interval=null;

function stopWatch()
{
    sec++;
    if((sec/60)===1)
    {
        sec=0;
        minutes++;

        if((minutes/60)===1)
        {
            minutes=0;
            hrs++;
        }
    }
    
    if(hrs<10)
    {
        displayHours="0"+hrs.toString();
    }
    else
    {
        displayHours=hrs;
    }

    if(sec<10)
    {
        displaySeconds="0"+sec.toString();
    }
    else
    {
        displaySeconds=sec;
    }

    if(minutes<10)
    {
        displayMinutes="0"+minutes.toString();
    }
    else
    {
        displayMinutes=minutes;
    }
    
    document.getElementById("display").innerHTML=displayHours+":"+displayMinutes+":"+displaySeconds;
}

function start()
{
    if(!interval)//Condition to restrict increasing speed of interval
    {
        interval=window.setInterval(stopWatch,1000); 
    }
    
}

function stop()
{
    window.clearInterval(interval);
    sec=0;minutes=0;
    hrs=0;
    document.getElementById("display").innerHTML="00:00:00";   
}

function pause()
{
    clearInterval(interval);
    interval=false;
    
}

Anyone please help me with this how should i convert pause to continue and continue to pause in the stop watch, whenever i click pause button the stopwatch should pause and button text should change to continue and vice-versa. I am unable to do the same whatever i wrote above. I have tried with innerHTML property but it didn't worked.

Solution

innerHTML should work just fine...

For example:

let sec=0;
let minutes=0;
let hrs=0;

let displayHours=0;
let displaySeconds=0;
let displayMinutes=0;

let interval=null;

function stopWatch()
{
    sec++;
    if((sec/60)===1)
    {
        sec=0;
        minutes++;

        if((minutes/60)===1)
        {
            minutes=0;
            hrs++;
        }
    }
    
    if(hrs<10)
    {
        displayHours="0"+hrs.toString();
    }
    else
    {
        displayHours=hrs;
    }

    if(sec<10)
    {
        displaySeconds="0"+sec.toString();
    }
    else
    {
        displaySeconds=sec;
    }

    if(minutes<10)
    {
        displayMinutes="0"+minutes.toString();
    }
    else
    {
        displayMinutes=minutes;
    }
    
    document.getElementById("display").innerHTML=displayHours+":"+displayMinutes+":"+displaySeconds;
}

function start()
{
    if(!interval)//Condition to restrict increasing speed of interval
    {
        interval=window.setInterval(stopWatch,1000); 
    }
}

function stop()
{
    window.clearInterval(interval);
    sec=0;minutes=0;
    hrs=0;
    document.getElementById("display").innerHTML="00:00:00";
    interval=false;
}

function pause()
{
    if(interval) {
    clearInterval(interval);
    interval=false;
    document.getElementById("pause").innerHTML = "CONTINUE";
  }
  else {
    start();
    document.getElementById("pause").innerHTML = "PAUSE";
  } 
}

<div id="display">
00:00:00
</div>

<button onClick="start()">
START
</button>
<button onClick="stop()">
STOP
</button>
<button id="pause" onClick="pause()">
PAUSE
</button>

Answered By - Nsevens