Why can’t i switch between my "stop" and "start" buttons?

i'm making a stopwatch, and my codes is supposed to make the "start" button turn to "stop" button whenever i click on the "start" button and the opposite. My start button seems to work but when i try to switch it to "stop" it doesn't work...i don't know what is ưởng, anybody can help me? Thank you so much!

This is my js:

let hours = 0
let seconds = 0
let minutes = 0

//define var to hold 'display' value
    let displaySeconds = 0
    let displayMinutes = 0
    let displayHours = 0

//var to hold "setInterval" function
    let interval = null

//Define var to hold stopwatch status

    let status = "stopped"

//functions(logic to determine when to increment values,...)

function stopWatch() {

    //logic to determine when to flip to next next value

    if (seconds / 60 ===1){
        seconds = 0;

        if(minutes/ 60 ===1){
            minutes = 0;


    //if second, minute, hrs are only one digits, add a leaing 0 to the value
    if(seconds < 10){
        displaySeconds = "0" + seconds.toString()
        displaySeconds = seconds

    if(minutes < 10){
        displayMinutes = "0" + minutes.toString()
        displayMinutess = minutes

    if(hours < 10){
        displayHours = "0" + hours.toString()
        displayHours = hours

    //display updated time values to user
    document.getElementById('display').innerHTML = displayHours + ':' + displayMinutes + ":" + displaySeconds

function startStop(){
    if(status === "stopped"){
        //start the stopwatch by calling setInterval function
        interval = window.setInterval(stopWatch, 1000)
        document.getElementById('startStop').innerHTML = "stop"
        window.clearInterval(interval)//stop interval from running
        document.getElementById('startStop').innerHTML = "start"
        status = "stopped"

This is my html:

<!DOCTYPE html>
    <link rel="stylesheet"  href="style.css">
    <div class="container">
        <div id="display">
        <div class="button">
            <button id="startStop" onclick="startStop()">Start</button> 
            <button id="reset">Reset</button>



    <script src="index.js"></script>

Read more here: https://stackoverflow.com/questions/68467328/why-cant-i-switch-between-my-stop-and-start-buttons

Content Attribution

This content was originally published by Nương Đàm Thị at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: